温习js中对象的继承
温故而知新 XD
1. 关于原型和构造函数的几个知识要点:
- 使用new 操作符调用构造函数,会经历以下四个步骤:
1.1. 创建一个新对象;
1.2. 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象);
1.3. 执行构造函数中的代码(为这个新对象添加属性);
1.4. 返回新对象。 - 当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性:
__proto__
),指向构造函数的原型对象(所以可以在构造函数的 prototype 里存放实例公用的方法)。 - 每当代码读取某个对象的某个属性时,都会进行一次搜索,目标是具有给定名字的属性。搜索从对象实例本身开始。如果在实例中找到了该属性,则 return 该属性的值;如果没有找到,则搜索内部指针指向的原型对象(
__proto__
),若找到,则 return 该属性值;若没找到,继续搜索原型的原型...
2. 实现
给出父类 Animal,实现子类Cat:
function Animal (name) {
this.name = name
this.brother = 'Tony'
}
Animal.prototype.eat = function (thing) {
console.log(this.name + ' eat ' + thing);
}
2.1 组合继承(结合原型链和借用构造函数,不太完美)
function Cat (name) {
Animal.call(this,name) // 借用构造函数,继承父类属性
this.sister = 'May'
}
Cat.prototype = new Animal() // 原型链,继承父类方法
/* 在prototype继承了父类实例的全部属性,存在冗余。属性的继承已经在构造函数内通过调用父类构造函数实现。
实际上,子类的prototype需要的只是父类实例中指向父类原型的内部指针: Cat.prototype.__proto__ = Animal.protype */
console.log(Cat.prototype)
// {name: undefined(冗余), brother: "Tony"(冗余), constructor: ƒ}
Cat.prototype.constructor = Cat // 由于上面 Cat.prototype 进行了赋值,所以需要重新指定其构造函数。
// 这一步对 instanceof 无影响,因为 "instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性" ;影响的是Cat实例的constructor 属性。
// 如果不做这一步:var Tom = new Cat('Tom'); Tom.constructor ==> Animal
2.2 寄生组合继承(完美)
function Cat (name) {
Animal.call(this,name)
this.sister = 'May'
}
function createObject (obj) { /* 创建一个新对象,使用现有的对象来提供新创建的对象的__proto__ ,相当于 Object.create() */
function F () {}
F.prototype = obj
return new F()
}
Cat.prototype = createObject (Animal.prototype)
// 相当于 Cat.prototype = Object.create(Animal.prototype)
console.log(Cat.prototype)
// {constructor: ƒ}
Cat.prototype.constructor = Cat
2.3 ES6语法
class Animal {
constructor(name){
this.name = name
this.brother = 'Tony'
}
eat(thing) {
console.log(this.name + ' eat ' + thing);
}
}
class Cat extends Animal {
constructor(name) {
super(name)
/* super()表示调用父类构造函数,this指向子类。只有调用super之后,才可以使用this关键字,否则新建实例时会报错。*/
/* 另:super作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类。通过super调用父类方法时,方法内部this指向子类;对super的猴哥属性赋值时,super就是this,赋值的属性会变成子类实例的属性 (不清楚里面是什么魔法)*/
this.sister = 'May'
}
}