理解原型链和继承

理解原型和继承

1.理解原型对象实例构造函数之间的关系

​ 只要创建了一个函数，就会创建一个 prototype 属性，这个属性是一个指针，指向这个函数的原型对象，这个原型对这个象保存着所有实例共享的属性和方法。这个原型对象也会获得一个 constructor 属性，这个属性也是一个指针，指向其相关联的构造函数。

function Person(){ }  //构造函数

Person.prototype.name = "Nicholas";  //给原型对象添加属性和方法
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){ 
    alert(this.name); 
}; 
 
var person1 = new Person();  //new 生成实例 2 个实例
var person2 = new Person()
person1.sayName();   //"Nicholas" 
person2.sayName();   //"Nicholas" 
 
alert(person1.sayName === person2.sayName);  //true 

其原型对象默认只会取得 constructor 属性；该实例的内部将包含一个指针 [[Prototype]] （内部 属性)，指向构造函数的原型对象。虽然无法方式访问 [[Prototype]]，但浏览器在每个对象上都支持一个属性__ proto__；

要明确的真正重要的一点就 是，这个连接存在于实例与构造函数的原型对象之间，而不是存在于实例与构造函数之间

Person.prototype指向了原型对象，而Person.prototype.constructor又指回了Person

Person 的每个实例 person1 和 person2 都包含一个内部属性，该属性仅仅指向了 Person.prototype

2. 原型链

实例对象与原型对象之间的连接，就叫原型链。

任何一个对象都有一个 __ proto __ 内部属性，它指向创建它的函数的原型对象 ，在查找属性或方法是，先从自己的内部开始查找，如果自己没有，就沿着原型链向上查找。如果这个属性存在，于是就返回它的值而不必再搜索原型了。

function Foo(name, age) { //构造函数
      this.name = name
      this.age = age
      this.print = function () {  //实例中添加 print 方法
        console.log(this.age)
      }
   }
    
    Foo.prototype.print = function () { //给原型添加 print 方法
      alert(this.name)
    }
    var f = new Foo('meijuna',22) // 生成实例 f

    f.print()   //22
    f.toString()  // 去 f.__proto__.__proto__ 查找

3. 标识符查找规则

当为对象实例添加一个属性和方法时，这个属性或方法就会屏蔽原型对象中保存的同名属性或方法；

​ 当在 f.print()中访问 时，需要读取它的方法，因此就会在这个实例上搜索一个名为 print()的方法。这个属性方法存在，于是就返回它的方法而不必再搜索原型了。

4.继承

概念： 继承是一种在新对象上复用现有对象的属性的形式，有助于避免重复的代码和数据。

1. 原型链继承

​ 让子对象的原型对象等于父对象的一个实例

function SuperType(){    
	this.property = true;
} 

SuperType.prototype.getSuperValue = function(){   
	return this.property;
}; 
 
function SubType(){    
	this.subproperty = false; 
} 
  //继承了 SuperType
SubType.prototype = new SuperType(); 
 
SubType.prototype.getSubValue = function (){   
	return this.subproperty;
}; 

var instance = new SubType(); 
alert(instance.getSuperValue());      //true 

​ 我们没有使用 SubType 默认提供的原型，而是给它换了一个新原型；这个新原型 就是 SuperType 的实例。于是，新原型不仅具有作为一个 SuperType 的实例所拥有的全部属性和方法， 而且其内部还有一个指针，指向了 SuperType 的原型。

别忘了默认的原型

​ 前面例子中展示的原型链还少一环。我们知道，所有引用类型默认都继承了 Object，而 这个继承也是通过原型链实现的。大家要记住，所有函数的默认原型都是 Object 的实例，因此默认原 型都会包含一个内部指针，指向 Object.prototype。这也正是所有自定义类型都会继承 toString()、 valueOf()等默认方法的根本原因。

一句话，SubType继承了SuperType，而SuperType继承了Object。当调用instance.toString() 时，实际上调用的是保存在 Object.prototype 中的那个方法。

2. 借用构造函数继承

​ 在子对象构造函数中利用 call()或 apply() 将父对象指向子对象的实例对象。

相对于原型链而言，借用构造函数有一个很大的优势，即可以在子类型构造函数中向超类型构造函 数传递参数。看下面这个例子。

 function SuperType(name){   
    this.name = name;
} 
 
function SubType(){    
    //继承了 SuperType，同时还传递了参数    
    SuperType.call(this, "meijun");  
    
    //实例属性    
    this.age = 29;
} 
 
var instance = new SubType(); 
alert(instance.name);    //"meijun"; 
alert(instance.age);     //29 

3. 组合继承 （原型链继承+构造函数继承）

组合继承指的是将 原型链 和 借用构造函数 的 技术组合到一块，从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数 复用，又能够保证每个实例都有它自己的属性。下面来看一个例子。

function SuperType(name){     
	this.name = name;    
	this.colors = ["red", "blue", "green"];
} 
 
SuperType.prototype.sayName = function(){   
	alert(this.name);
}

function SubType(name, age){   
    //继承属性   
    SuperType.call(this, name);       
    this.age = age; 
} 
 
//继承方法 
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType; 
SubType.prototype.sayAge = function(){  
    alert(this.age);
}; 
 
var instance1 = new SubType("Nicholas", 29);
 instance1.colors.push("black"); 
 alert(instance1.colors);      //"red,blue,green,black" 
 instance1.sayName();          //"Nicholas"; 
 instance1.sayAge();           //29 
 
var instance2 = new SubType("Greg", 27);
 alert(instance2.colors);      //"red,blue,green" 
 instance2.sayName();          //"Greg"; 
 instance2.sayAge();           //27 
   

在这个例子中，SuperType 构造函数定义了两个属性：name 和 colors。SuperType 的原型定义 了一个方法 sayName()。SubType 构造函数在调用 SuperType 构造函数时传入了 name 参数，紧接着 又定义了它自己的属性 age。然后，将 SuperType 的实例赋值给 SubType 的原型，然后又在该新原型 上定义了方法 sayAge()。这样一来，就可以让两个不同的 SubType 实例既分别拥有自己属性——包 括 colors 属性，又可以使用相同的方法了。

组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优点，成为 JavaScript中常用的继承模式。

4. ES6 实现继承

ES6 引入了关键字 class， 可以更方便的实现模拟类，使用关键字 extends 可以更优雅的实现继承。

/ 父类
class SuperType {
  constructor(name) {          // 定义构造函数
    this.name = name;
    this.colors = ["red", "blue", "green"];
  }
 
  sayName() {    // 定义所有实例都可以访问的 方法
    console.log(this.name);
  };
}

// 子类
class SubType extends SuperType {
  constructor(name, age) {
    // 继承父类实例属性和prototype上的方法
    super(name);
    this.age = age;    // 子类实例属性
  }

  // 子类方法
  sayAge() {
    console.log(this.age);
  }
}

// 实例
var instance1 = new SubType('meijun', 22);
instance1.colors.push('black');
instance1.sayAge();                                   // 22
instance1.sayName();                                  // "meijuna"
console.log(instance1.colors);                        // ["red", "blue", "green", "black"]

var instance2 = new SubType('Peter', 30);
instance2.sayAge();                                   // 30
instance2.sayName();                                  // "Peter"
console.log(instance2.colors);                        // ["red", "blue", "green"]