原生JS学习笔记之继承：入门篇
原型继承
上帝创造了第一个男人亚当。把他安置在东方的伊甸园，后来取出他身上的肋骨为他造了女人夏娃，于是便有了人类,也有了原型继承。本质上原型继承是对现实中生物繁衍方式的一层抽象。
重要的事情说三遍:
__proto__ 为原型。 prototype 是构造函数上指向原型对象的指针, constructor 是原型上指向构造函数的指针
__proto__ 为原型。 prototype 是构造函数上指向原型对象的指针, constructor 是原型上指向构造函数的指针
__proto__ 为原型。 prototype 是构造函数上指向原型对象的指针, constructor 是原型上指向构造函数的指针
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
function Father(name, age){ this.name = name; this.age = age; } function Son(name){ this.name = name; } let daming = new Father('大明', 50); let mayun = new Father('马云', 50); daming.money = '1000rmb'; mayun.money = '100000000000rmb'; Son.prototype = daming; let xiaoming = new Son('xiaoming') xiaoming.money // '1000rmb' daming.money= '1000000rmb';// 大明做生意发财了; xiaoming.money // '1000000rmb'; daming.money='-1000000rmb'; // 大明破产了; xiaoming.money // '-1000000rmb'; xiaoming.__proto__ = mayun; // 小明拼了; xiaoming.money // '100000000000rmb' xiaoming.__proto__.__proto__ = mayun // 小明带大明共同致富（运行时需注释上面两行） delete daming.money xiaoming.money // '100000000000rmb' daming.money // '100000000000rmb' xiaoming.money = '10rmb'； xiaoming.money // '10rmb' |
大致总结下上面的代码 当访问小明的钱属性时,如果小明有就返回小明的,如果小明没有，就返回大明的,如果还没有返回大明父亲的，依次向上查找（就是JS变量在作用域的查找机制有没有),而且还可以换爹，换爷爷哦。
大明说 什么父亲类，儿子类的。 我就是我，是不一样的爸爸(当我们的需求只是简单的定义两个对象的继承关系时,代码如下)
|
1 2 3 4 |
let daming = {name:'daming',money:'1000000rmb'}; let xiaoming = Object.create(daming); // ES5写法，第一个参数传入原型对象，第二个为可选参数，descriptors属性。 xiaoming.money; // '1000000rmb' |
原型继承优势:
1.动态的改变已实例化对象的“属性”(继承自原型链且没有被覆盖的属性:动态改变原型属性)。
2.有时你只需要简单的定义两个对象的继承关系，不需要新建那么多类。
原型继承虽好,但也有尴尬的时候
|
1 2 3 4 5 6 7 8 |
function Person(){} Person.prototype.girlFriends = ['小芳','小美','小丽']; let xiaowang = new Person(); let xiaozhang = new Person(); xiaowang.girlFriends === xiaozhang.girlFriends // true 共享XXX？？ WTF??? xiaowang.girlFriends.push('小茜'); xiaozhang.girlFriends // ['小芳','小美','小丽','小茜']; |
原型继承的正确使用方式
正确用法应该是 构造函数写私有属性, 原型上写共享属性;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function Person(){ this.girlFriends = ['小芳','小美','小丽']; } Person.prototype.father = 'laowang'; // 共享属性; let xiaowang = new Person(); let xiaozhang = new Person(); xiaowang.girlFriends === xiaozhang.girlFriends // false 同名而已 紧张个蛋。 xiaowang.hasOwnPrototype(girlFriends) // true // 顺便介绍几个常用方法: girlFriends in xiaowang // true 判断 girlFriends 是否 为小王的属性 或者是 继承来的属性; xiaowang.hasOwnProperty(girlFriends) // true 判定 girlFriends 是否为小王自身的属性。 xiaowang instanceof Person // true 判断 Person 是否为 xiaowang 原型链上 某个对象的 constructor Person.prototype.isPrototypeOf(xiaowang); // 判断 Person.prototype是否为 xiaowang 的 原型 |
当子类需要继承父类构造函数中的私有属性时，我们可以借助call或者apply方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function Cat(name,age,color){ this.name = name; this.age = age; this.color = color; } Cat.prototype.shout = function(){ console.log('汪汪'); } Tiger.prototype = Object.create(Cat.prototype); // 建立 原型继承关系 function Tiger(name,age,color){ Cat.call(this, name, age, color); } let tom = new Tiger('tom',5,'yellow'); let lucy = new Tiger('lucy',6,'black'); lucy.shout() // '汪汪' tom.shout(); // '汪汪' |
ES6
有些看官 看到此 还是会说:我不听，我不听， 我就要跟java那样的 class 和 extends,上面的代码可改为如下:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
class Cat { constructor(name, age, color) { // 构造函数 this.name = name; this.age = age; this.color = color; } shout() { //原型对象上的方法 等同于Cat.prototype.shout = () => {console.log('汪汪')} console.log('汪汪') } } class Tiger extends Cat { constructor() { super(name, age, color) // 看着眼熟 Cat.call(this, name, age, color) } } let tom = new Tiger('tom',5,'yellow'); //{ name: 'tom', age: 5, color: 'yellow' } console.log(tom.shout === Cat.prototype.shout); // true |
看官们又说不就是语法糖嘛：我们是糖，甜到哀伤。确实是语法糖，但也不仅仅是语法糖
|
1 2 3 4 |
tom.__proto__ === Tiger.prototype // true; Tiger.prototype.__proto__ === Cat.prototype //true; Tiger.__proto__ === Cat // true; |
两条继承链。。。JS中 Class 也是对象，作为对象 Tiger类 继承自 Cat类。作为构造函数 ,Tiger的prototype 继承自Cat的prototype;
既然Tiger类是对象,那可以在Tiger类对象上定义属性来模拟java中的静态方法和静态属性
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
class Cat { constructor(name, age, color) { this.name = name; this.age = age; this.color = color; } shout() { console.log('汪汪') } } class Tiger extends Cat { constructor(...args) { // 换ES6写法咯 super(...args) } static sing() { // 静态方法. return '我是森林之王'; } } // ES6规定在class内部只允许静态方法，不允许静态属性。但可以写在类的外面; Tiger.power = 'max'; Tiger.power; // 'max' |
既然是对象，便可以定义getter,setter方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class Tiger extends Cat { constructor(...args) { super(...args) } static sing() { return '我是森林之王'; } get speed(){ // 又是语法糖 console.log('run'); } set speed(value){ console.log('run:'+value) } } |
等同于
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class Tiger extends Cat { constructor(...args) { super(...args) } static sing() { return '我是森林之王'; } } Object.defineProperty(Tiger.prototype,'speed',{ get(){console.log('run')}, set(value){console.log('run:'+value);} }) |