弁言

上篇文章引见原型，这篇文章接着讲继续，呕心沥血之作，大哥们点个赞呀

明白一点：JavaScript并非真正的面向对象言语，没有真正的类，所以我们也没有类继续

完成继续==有且唯一两种体式格局，call和原型链==

在引见继续前我们先引见下其他观点

函数的三种角色

一个函数，有三种角色。
当做一般函数，当做组织函数（类），当做对象

function Person (nickname) {
        var age = 15 //当一般函数使 **重点:称为私有属性**
        this.age = 30    //当组织函数使 **重点:称为实例属性**
    }
    Person.prototype.age = 50 //当组织函数使   **重点:称为原型属性**
    Person.age =100  //当对象使 **重点:称为静态属性**    

==我个人把属性和要领一致称为广义上的属性，所以上面说法实在不严谨==

人人猜一猜Array.isArray是静态要领照样原型要领，为啥？Array.push呢？

继续的体式格局

继续准绳:
运用call继续实例上的属性
运用原型链继续原型上的属性
子类须要有本身的原型，父类也必需要有本身的原型，子实例在本身的原型上找不到属性的时刻才会到父原型上去找(这也就是子类.prototype = 父类.prototype不可的缘由，因为它们中心没有==“缓冲”==，改了子类原型相当于就改了父类原型！)

组合继续

const Person = function (name) {
        this.name = name
    }
Person.prototype.introduce = function(){
  Object.entries(this).forEach((item)=>{
        console.log(`my ${item[0]} is ${item[1]}`)
    })
    
}

const Student = function (name,age) {
        Person.call(this,name)
        this.age = age
    }
Student.prototype = new Person()      //这里new了父类一次，增加了分外开支
Student.prototype.constructor =  Student         //这一句能够让student.constructor.name由Person变成Student 轻易确认组织函数

let student = new Student('小明',15)
student.introduce()  继续父类原型要领的同时继续父类实例上的属性
//my name is 小明
//my age is 15      

组合继续有一个瑕玷,会分外new父类一次，增加了分外开支（想想假如父类迥殊大这斲丧会有多大）

Object.create继续（原型式继续）

从名字也看出来了，借用原型链继续，实例能经由过程__proto__追踪到传入到参数obj，所以源码以下
//Oject.create(obj)
Object.create = function(obj){

var fn = funcion(){}
fn.prototype = obj
reurturn new fn() 

}
var A = Object.create(B) //A能找到B
=再次强调一遍，A经由过程原型链终究到B=

优化组合继续==>寄生组合式继续

我们再看一下组合继续的原型链 Student–>Person的实例–>Person
还记得我们在最最先继续准绳中说的缓冲吗，Person的实例就是这么一个缓冲 然则瑕玷就是组织这么一个缓冲开支大了

所以我们有一个优化手腕

Student.prototype = new Person()  //未优化的时刻   Person实例充任原型链的中心对象（缓冲）
-------------------------
Student.prototype = Object.create(Person.prototype) //优化后    一个继续Person的空对象充任中心对象（缓冲）
------------------------
Student.prototype.__proto__ = Person.prototype  //固然也有人这么写  道理都是一样，Student.prototype.__proto__做缓冲

new干了啥

既然new在“类”的建立内里必需运用，那末我们就说一下new究竟干了啥事变

1.建立一个对象o继续组织函数
2.让组织函数的this变成o,并实行组织函数，将返回值设置为k
3.假如k

//仿写new
function new1(func) {
        var o = Object.create(func.prototype)
        var k = func.apply(o,arguments[1])
        return typeof k === 'object'? k: o
    }
const x = new1(Student,['张三'])
x.name //'张三'
x.eat //'i am hungry,i want to eat!'

我们回过甚再理会一下组织函数形式继续

const Person = function (name) {
        this.name = name
    }
const Students = function (name) {
        Person.call(this,name) //this是student实例
    }
const xm = new Students('小明')  //理会这里干了什么
console.log(xm)  //Students {name: "小明"}

1.让空对象o继续Students(o能接见Students的原型)
2.student实行，实行Person的代码,this是o,而且传入name, o.name='小明'返回的k是undefined
3.返回o，也就是返回{name:'小明'}

es6继续

class Person {
}
class Student extends person{
}

在babel es2015-loose形式下编译后的源码以下

"use strict";

    function _inheritsLoose(subClass, superClass) {
        subClass.prototype = Object.create(superClass.prototype);
        subClass.prototype.constructor = subClass;
        subClass.__proto__ = superClass;
    }

    var Person = function Person() {
    };

    var Student =
        /*#__PURE__*/
        function (_person) {
            _inheritsLoose(Student, _person);

            function Student() {
                return _person.apply(this, arguments) || this;
            }

            return Student;
        }(person);

严厉形式下，高等单例形式返回一个Student, 能够看到Person的实例属性用的Person的组织函数+apply继续的
原型属性用的_inheritsLoose这个要领继续的
_inheritsLoose要领貌似就是我们之前说的寄生组合继续

继续的运用:vue数组变异要领的完成

我们晓得vue内里的数组有变异要领，变异要领有啥功用呢，就拿push来讲，一方面数组会变，别的一方面有相应式（假定触发render要领）
思绪：APO编程头脑
数组之所以有push要领，是因为Array.prototype上有push要领
我们须要完成本身的push要领，挂在Array.prototype上对原型链追踪举行阻拦，然则呢又不能转变原型链上对非变异要领
原型链表示：

    Vue内里增加过监控的数组实例--->我们本身完成的变异要领-->本来的Array.prototype
    

const arrList = ['push','pop','shift','unshfit','reverse','sort','splice']
const render = ()=>{console.log('相应式，衬着视图')}
const proto = Object.create(Array)
arrList.forEach((method)=>{
    proto[method] = function(){
        render()
        Array.prototype[method].call(this,...arguments)
    }
})
var data = [1,2,3]
data.__proto__ = proto    //mvvm相应式道理，假如增加相应式的目的是数组，我就实行这个操纵

data.push(4)   // 相应式，衬着视图,(data[1,2,3,4])

总结

本节细致引见了继续的道理以及优化，关于es6的继续语法糖也做了理会。同时引见了一下mvvm下数组借用继续完成相应式的用法，因为本人程度有限，假如有什么不对的处所，迎接留言指出。