什么是原型链？

当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就是我们新建的对象为什么能够使用 toString() 等方法的原因。

特点：

JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

获取原型的方法？

  1. p.__proto__

  2. p.constructor.prototype

  3. Object.getPrototypeOf(p)

原型链相关方法

  • isPrototypeOf() 如果隐式原型__proto__指向调用isPrototypeOf()方法的对象原型, 那么这个方法就返回true

  • Object.getPrototypeOf() 获取实例的隐式原型(proto)的指向

  • hasOwnProperty() 判断属性是否是存在于自己的实例中

  • Object.keys() 获获取对象 实例上 可枚举的属性名

  • Object.getOwnPropertyName() 获得对象 实例上 属性名，无论它是否可枚举

  • for in 获取 实例&原型上 可枚举 的属性

  • instanceOf object instanceof constructor,用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。


function Person(){this.age = 100}
Person.prototype.name="zhan";
Person.prototype.sex='女'
Person.prototype.sayName=function(){
    return this.name;
}

var person1 = new Person;
person1.name="wang";
person1.job='yanyuan'
Object.defineProperty(person1, "age", {value:"forever 18", enumerable:false});

Person.prototype.isPrototypeOf(person1); // true

Object.getPrototypeOf(person1) == Person.prototype // true

person1.hasOwnProperty("age");　　//true　
person1.hasOwnProperty("sex"); // false 　因为sex是原型的属性，而不是自己实例的属性

Object.keys(person1) //  ["name", "job"]
Object.keys(Person.prototype) //  ["name", "sex", "sayName"]

Object.getOwnPropertyNames(person1); // ["age", "name", "job"]
Object.getOwnPropertyNames(Person.prototype); // ["constructor", "name", "sex", "sayName"]

for(var i in person1) console.log(i) // name job sex sayName
for(var i in Person.prototype) console.log(i) // name sex sayName

person1 instanceof Person //true
person1 instanceof Object // true

 

JavaScript 继承的几种实现方式

想要继承，就必须要提供个父类（继承谁，提供继承的属性）

  1. 原型链继承:让新实例的原型等于父类的实例。

    • 特点
    1. 实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！）
    • 缺点
    1. 新实例无法向父类构造函数传参。
    2. 继承单一。
    3. 所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改！）

  2. 借用构造函数（类式继承）:用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））

    - 特点：

    1. 只继承了父类构造函数的属性，没有继承父类原型的属性。
    2. 解决了原型链继承缺点1、2、3。
    3. 可以继承多个构造函数属性（call多个）。
    4. 在子实例中可向父实例传参。

    - 缺点：

    1. 只能继承父类构造函数的属性。
    2. 无法实现构造函数的复用。（每次用每次都要重新调用）
    3. 每个新实例都有父类构造函数的副本，臃肿。

  3. 组合式继承（组合原型链继承和借用构造函数继承）（常用） 结合了两种模式的优点，传参和复用

    • 特点：
    1. 可以继承父类原型上的属性，可以传参，可复用。
    2. 每个新实例引入的构造函数属性是私有的。
    • 缺点：调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。

  4. 原型式继承

    • 重点：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。
    • 特点：类似于复制一个对象，用函数来包装。
    • 缺点：
    1. 所有实例都会继承原型上的属性。
    2. 无法实现复用。（新实例属性都是后面添加的）

  5. 寄生式继承

    • 重点：就是给原型式继承外面套了个壳子。
    • 优点：没有创建自定义类型，因为只是套了个壳子返回对象（这个），这个函数顺理成章就成了创建的新对象。
    • 缺点：没用到原型，无法复用。

  6. 寄生组合式继承（常用）

    • 寄生：在函数内返回对象然后调用
    • 组合：1、函数的原型等于另一个实例。2、在函数中用apply或者call引入另一个构造函数，可传参　
    • 重点：修复了组合继承的问题
  

// 父类---------------------------

function Person(name){ //给构造函数添加参数
    this.name=name
    this.sayName =function(){
        alert(this.name)
    }
}
Person.prototype.age = 18; //给构造函数添加了原型属性

// 原型链继承---------------------------
function Per(){
    this.name = 'panpan';
}
Per.prototype= new Person(); //重点
var per1 = new Per();
console.log(per1.age); // 18
// instanceof判断元素是否在另一个元素的原型链上
console.log(per1 instanceof Person); //true

// 借用构造函数继承---------------------
function Con(){
    Person.call(this,'ava'); //重点
    this.age = 21
}
var con1 = new Con()
console.log(con1.name) //ava
console.log(con1.age) //21
console.log(con1 instanceof Person) //false

// 组合原型链继承和借用构造函数继承
function SubType(name){
    Person.call(this,name); //借用构造函数模式
}
SubType.prototype= new Person(); //原型链继承
var sub = new SubType('lian')
console.log(sub.name) //lian 继承构造函数属性
console.log(sub.age) //18 继承父类原型属性

// 原型式继承---------------------------
// 先封装1个函数容器，用来输出对象和承载继承的原型
function content(obj){
    function F(){}
    F.prototype=obj; //继承传入的参数
    return new F() //返回函数对象
}
var sup = new Person(); //拿到父类的实例
var sup1 = content(sup)
console.log(sup1.age) //18 继承父类函数属性

// 寄生式继承----------------------
// 给原型式继承再套个壳子传递参数
function subObject(obj){
    var sub = content(obj)
    obj.name= 'pan';
    return sub
}
//声明后成了可增添属性的对象
var sup2 = subObject(sup)
console.log(typeof subObject) //function
console.log(typeof sup2) //object
console.log(sup2.name) //pan

// 寄生组合式继承---------------------
// 寄生
function content(obj){
    function F(){}
    F.prototype=obj; //继承传入的参数
    return new F() //返回函数对象
}
// content就是F实例的另一种表达
var con = content(Person.prototype)
// con实例(F实例)的原型链继承了父类函数的原型
// 上述更像原型链继承,只不过继承了原型属性

// 组合
function Sub(){
    Person.call(this) // 继承父类构造函数属性
} //解决组合式2次调用构造函数属性的缺点

// 重点
Sub.prototype = con; //继承con实例
con.constructor = Sub; //一定要修复实例
var sub1 = new Sub();
// Sub实例继承了构造函数属性、父类实例、con的函数属性
console.log(sub1.age)