4 类

约 2014 字大约 7 分钟

2025-06-17

构造函数是由new关键字决定的，任何函数都可以是构造函数，但是没有使用new关键字的函数是普通函数，只有使用new关键字调用的函数才是构造函数

在访问一个对象身上的属性或者函数时首先会在对象自身查找是否有这个属性（函数），如果没有就继续递归往它的prototype上去找，找到的话就调用，直到protytype为空时还没有找到就会报错

JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾准确地说，这些属性和方法定义在Object的构造器函数（constructor functions）之上的prototype属性上，而非实例对象本身

原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链 (prototype chain)，它解释了为何一个对象会拥有定义在其他对象中的属性和方法在对象实例和它的构造器之间建立一个链接（它是__proto__属性，是从构造函数的prototype属性派生的），之后通过上溯原型链，在构造器中找到这些属性和方法

一切对象都是继承自Object对象，Object 对象直接继承根源对象null
一切的函数对象（包括 Object 对象），都是继承自 Function 对象
Object 对象直接继承自 Function 对象
Function对象的__proto__会指向自己的原型对象，最终还是继承自Object对象

8. 继承

如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超类”

继承的优点

继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码

在子类别继承父类别的同时，可以重新定义某些属性，并重写某些方法，即覆盖父类别的原有属性和方法，使其获得与父类别不同的功能

实现方式

原型链继承

原型链继承是比较常见的继承方式之一，其中涉及的构造函数、原型和实例，三者之间存在着一定的关系，即每一个构造函数都有一个原型对象，原型对象又包含一个指向构造函数的指针，而实例则包含一个原型对象的指针

function Parent() {  
  this.name = 'parent1';  
  this.play = [1, 2, 3]  
}  
function Child() {  
  this.type = 'child2';  
}  
Child.prototype = new Parent();  
console.log(new Child())

上面代码看似没问题，实际存在潜在问题

var s1 = new Child();  
var s2 = new Child();  
s1.play.push(4);  
console.log(s1.play, s2.play); // [1,2,3,4]

改变s1的play属性，会发现s2也跟着发生变化了

缺点两个实例使用的是同一个原型对象，内存空间是共享的，在一个对象上修改父类原型上的数据，其他继承同一个父类的对象也会被改变

构造函数继承（借助 call）

通过在子类中调用父类的构造函数实现子类身上有父类的属性（函数）

借助 call调用Parent函数

function Parent(){  
    this.name = 'parent1';  
}  
  
Parent.prototype.getName = function () {  
    return this.name;  
}  
  
function Child(){  
    Parent.call(this);  
    this.type = 'child'  
}  
  
let child = new Child();  
console.log(child);  // 没问题  
console.log(child.getName());  // 会报错

父类原型对象中一旦存在父类之前自己定义的方法，那么子类将无法继承这些方法相比第一种原型链继承方式，父类的引用属性不会被共享，优化了第一种继承方式的弊端，但是只能继承父类的实例属性和方法，不能继承父类原型（prototype）属性或者方法

缺点如果在父类的prototype上定义了属性和方法使用构造函数继承的方式子类无法继承父类的prototype上的属性和方法

组合继承

前面两种继承方式，各有优缺点。组合继承则将前两种方式继承起来

function Parent3 () {  
    this.name = 'parent3';  
    this.play = [1, 2, 3];  
}  
  
Parent3.prototype.getName = function () {  
    return this.name;  
}  
function Child3() {  
    // 第二次调用 Parent3()  
    Parent3.call(this);  
    this.type = 'child3';  
}  
  
// 第一次调用 Parent3()  
Child3.prototype = new Parent3();  
// 手动挂上构造器，指向自己的构造函数  
Child3.prototype.constructor = Child3;  
var s3 = new Child3();  
var s4 = new Child3();  
s3.play.push(4);  
console.log(s3.play, s4.play);  // 不互相影响  
console.log(s3.getName()); // 正常输出'parent3'  
console.log(s4.getName()); // 正常输出'parent3'

这种方式看起来就没什么问题，方式一和方式二的问题都解决了，但是从上面代码我们也可以看到Parent3 执行了两次

缺点父类的构造执行了两次，造成了多构造一次的性能开销

原型式继承

这里主要借助Object.create方法实现普通对象的继承

let parent = {  
    name: "parent",  
    friends: ["p1", "p2", "p3"],  
    getName: function() {  
      return this.name;  
    }  
};  
  
let person1 = Object.create(parent);  
person4.name = "tom";  
person4.friends.push("jerry");  
  
let person2 = Object.create(parent);  
person5.friends.push("lucy");  
  
console.log(person1.name); // tom  
console.log(person1.name === person1.getName()); // true  
console.log(person2.name); // parent4  
console.log(person1.friends); // ["p1", "p2", "p3","jerry","lucy"]  
console.log(person2.friends); // ["p1", "p2", "p3","jerry","lucy"]

这种继承方式的缺点也很明显，因为Object.create方法实现的是浅拷贝，多个实例的引用类型属性指向相同的内存，存在篡改的可能

缺点由于create对于引用类型的属性采用的是浅拷贝（基本数据类型直接拷贝无影响），所以在修改一个对象的引用类型的数据时和它一起继承同一个父类的其他对象的数据也会被修改

寄生式继承

寄生式继承在上面继承基础上进行优化，利用这个浅拷贝的能力再进行增强，添加一些方法

let parent5 = {  
    name: "parent5",  
    friends: ["p1", "p2", "p3"],  
    getName: function() {  
        return this.name;  
    }  
};  
  
function clone(original) {  
    let clone = Object.create(original);  
    clone.getFriends = function() {  
        return this.friends;  
    };  
    return clone;  
}  
  
let person5 = clone(parent5);  
  
console.log(person5.getName()); // parent5  
console.log(person5.getFriends()); // ["p1", "p2", "p3"]

其优缺点也很明显，跟上面讲的原型式继承一样

寄生组合式继承

寄生组合式继承，借助解决普通对象的继承问题的Object.create 方法，在几种继承方式的优缺点基础上进行改造，这也是所有继承方式里面相对最优的继承方式

function clone (parent, child) {  
    // 这里改用 Object.create 就可以减少组合继承中多进行一次构造的过程  
    child.prototype = Object.create(parent.prototype);  
    child.prototype.constructor = child;  
}  
  
function Parent6() {  
    this.name = 'parent6';  
    this.play = [1, 2, 3];  
}  
Parent6.prototype.getName = function () {  
    return this.name;  
}  
function Child6() {  
    Parent6.call(this);  
    this.friends = 'child5';  
}  
  
clone(Parent6, Child6);  
  
Child6.prototype.getFriends = function () {  
    return this.friends;  
}  
  
let person6 = new Child6();   
console.log(person6); //{friends:"child5",name:"child5",play:[1,2,3],__proto__:Parent6}  
console.log(person6.getName()); // parent6  
console.log(person6.getFriends()); // child5