javascipt
实现 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
第三步 (为了使子构造函数的实例能正确指向子构造函数): 很类似双向链表中替换单个节点的操作.
来源: http://www.jianshu.com/p/fd2b9fbea4a5