实现javascript完美继承要考虑三个方面:
第一步: 获取父构造函数体内的属性
- 解决方法: 通过
Father.call(this)实现(这里的this是子构造函数)
第二步: 根据父构造函数原型 创建独立的子构造函数原型, 且要求子构造函数原型的__proto__属性指向子构造函数
- 解决方法:
Son.prototype = Object.create(Father.prototype)
第三步: 将子构造函数原型的constractor指向子构造函数
- 解决方法
Son.prototype.constractor = Son
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完美继承</title>
<script>
function Father(name){
this.name = name;
}
Father.prototype.sayName = function(){
console.log(this.name)
};
function Son(name, age){
// 第一步: 获取父构造函数函数体内的属性
Father.call(this, name)
}
// 第二步: 根据父构造函数原型 创建独立的子构造函数原型, 且要求子构造函数原型的__proto__属性指向子构造函数
Son.prototype = Object.create(Father.prototype);
// 第三步: 将子构造函数原型的constractor指向子构造函数
Son.prototype.constructor = Son;
son1 = new Son("小明", 13);
console.log("子对象的原型指向子构造函数:",son1.__proto__ === Son.prototype);
console.log("子对象的原型指向父构造函数:",son1.__proto__ === Father.prototype);
console.log("打印子对象", son1);
son2 = new Son("小红", 14);
console.log("打印两个子对象的属性",son1, son2);
son1.sayName();
son2.sayName();
// 重新父原型内的方法 ,观察是否会对父原型产生影响
Son.prototype.sayName = function(){
console.log("子原型函数sayName", this.name);
};
// 父实例对象调用sayName
father1 = new Father("老王");
father1.sayName();
// 子实例调用sayName
son1.sayName();
son2.sayName();
</script>
</head>
<body>
</body>
</html>
小结
- 第一步(为了获取父构造函数函数体内的属性): 用子构造函数
this, 去执行父构造函数, 最终使父构造函数的属性被附加到了子构造函数this上.
- 第二步(为了完美获取父构造函数原型): 要理解
b = Object.create(a),创建出实例a的__proto__依然是指向a的, 即b.__proto__ === a
- 第三步(为了使子构造函数的实例能正确指向子构造函数): 很类似双向链表中替换单个节点的操作.
