JS高级面向对象(二)-构造函数和原型-白红宇

JS高级面向对象(二)-构造函数和原型

阅读量：654 次

发布时间：2019-03-15

本文共 2284 字，大约阅读时间需要 7 分钟。

JavaScript中的构造函数和原型之道

1. 创建对象的三种方式

在JavaScript中，对象可以通过三种方式创建：

对象字面量：直接在代码中定义对象的结构。例如：

var obj = {    name: '张三',    age: 20};

这种方式高效，适合少量对象的创建。

使用new Object()创建：这种方法创建一个空对象，然后手动添加属性。例如：

var obj = new Object();obj.name = '张三';obj.age = 20;

自定义构造函数：通过函数返回一个新的对象实例。例如：

function People(name, age) {    this.name = name;    this.age = age;    this.sing = function() {        console.log('唱歌了！');    };}var person = new People('张三', 20);

2. 静态成员和实例成员

JavaScript允许在函数中通过this添加实例成员，而静态成员则是函数本身或原型上的属性。例如：

实例成员：

function People(name, age) {    this.name = name;    this.age = age;}var a = new People('张三', 20);console.log(a.name); // 输出"张三"

静态成员：

function People(name, age) {    this.name = name;    this.age = age;}People.maxAge = 30; // 静态成员console.log(People.maxAge); // 输出30

3. 构造函数原型： prototype

每个构造函数都有一个prototype属性，用于定义公共的方法和属性。这些方法会被所有实例共享。例如：

在构造函数中定义方法：

function People(name, age) {    this.name = name;    this.age = age;    this.sing = function() {        console.log(this.name + '唱歌了！');    };}

通过原型共享方法：

var a = new People('张三', 20);var b = new People('李四', 30);console.log(a.sing === b.sing); // true，两个实例共享同一方法

原型对象的作用是避免重复存储方法，提高内存效率。

4. 实例原型：proto

每个实例都有__proto__属性，指向它的构造函数的原型。例如：

var a = new People('张三', 20);console.log(a.__proto__ === People.prototype); // true

当访问实例属性时，JavaScript会从__proto__中继而查找原型对象的属性。

5. 构造函数的constructor属性

构造函数的prototype属性也包含一个constructor，指回构造函数本身。这允许原型对象通过constructor重新指向正确的构造函数。

6. 方法查找顺序

JavaScript在查找对象属性时，会首先检查构造函数，然后检查原型对象，最后是更高层的原型。例如：

Object.prototype.sex = '对象性别';People.prototype.sex = '实例性别';var a = new People('张三', 20);console.log(a.sex); // 输出"实例性别"

7. 原型对象中的this指向

原型对象中的方法在被调用时，其this会指向当前的对象实例。例如：

function People(name, age) {    this.name = name;    this.age = age;    console.log('构造函数中的this：', this);}People.prototype.say = function() {    console.log('原型对象中的this：', this);}var a = new People('张三', 20);a.say(); // this指向对象a

8. 构造函数与内置对象的扩展

可以通过原型对象扩展内置对象的功能。例如，给Array添加求和方法：

Array.prototype.sum = function() {    var total = 0;    for (var i = 0; i < this.length; i++) {        total += this[i];    }    return total;}var arr = new Array(10, 20, 30);console.log(arr.sum()); // 输出60