JavaScript 原型链横向，纵向扩展知识！！！！！

 

名词解释：

Prototype:原型，每个函数在生成的时候会生成一个prototype属性，里面就是函数的原型，包括了函数的实例化属性和方法，可以理解为函数实例化的副本

__proto__:原型链，各大浏览器为了方便用户理解，要求需要部署的属性，所有对象都有这个属性(包括函数),指向构造函数的原型；

Constructor:构造函数，所有对象(包括函数)都拥有此属性，指向构造函数；              

 

实例与原型

New过程代码：

function NEW(fn,...rest){

  let obj = {__proto__ :fn.prototype};// 将obj原型与目标对象的原型链连接

  fn.call(obj,...rest);// 执行构造函数

  return obj  // 返回return

}

 

从代码程度理解实例与原型的关系，也就是  实例的_proto_ = 构造函数的原型；

 

原型与实例与构造函数

每个对象都拥有_proto_ constructor ,那么也就是说原型链这条链从你建立类或者函数或者对象，他们都拥有一条很长延伸的链，那么这链的顶端是什么呢？这里可以简单说一说，

Constrctor的顶端是 Function.constructor,原型链的顶端是NULL，这里大家可以自己通过以下代码去感受以下；

Object.__proto__ == Function.prototype  //true                        

Object.prototype.__proto__  //NULL

 

 

 

这7种模式具体代码实现和优缺点会在这一届展示

 

 

父子类

Class parent {}                                

Class child extends parent{}

 

child ._proto_ == parent  //true

 

child .prototype.__proto__ == parent.prototype  //true

 

这里需要说到extends这个es6所提供的继承符号的代码实现

Extends(){

 

}

延展知识

Class 原理

深度解析constructor属性和class的关系，首先来了解一下类作为es6新特性，是属于es5函数式声明类的语法糖，在es5中，会有如下创建类的步骤

 

1.声明一个函数

Function fn(){  todo// 声明属性}

2.创建实例属性

Fn.prototype.methods = function(){} // todo 声明方法

3.创建静态属性

Fn.methods = function(){}  声明静态方法

 

 

ES6 语法糖class使用方法

 

1.创建一个类

Class fn {

   Constructor(){

Public,static,protected,privated权限不同的标识符

      2//创建constructor方法，实例化是属性

}

   3.创建实例方法

Methods(){}

   4.创建一个非实例化属性static 标识符

 

}

 

 

本质上，类的创建就是es5中函数的创建，那么 class的整个过程究竟是怎么样的呢？

let people = function() {

      function peole(name, age) {

        this.name = name;

        this.age = age;

        let definPropties = function(target, props) {

          for (let i = 0; i < props.length; i++) {

            let descriptor = props[i];

            Object.defineProperty(target, descriptor.key, descriptor);

          }

        };

        let creatClass = function() {

          return function(Constructor, protoProps, staticProps) {

            if (protoProps) definPropties(Constructor.protoProps, protoProps);

            if (staticProps) definPropties(Constructor, staticProps);

          };

        };

        let protoProps = [

          {

            key: "say",

            value: function() {

              console.log(123);

            }

          }

        ];

        let staticProps = [

          {

            key: "say",

            value: function() {

              console.log(123);

            }

          }

        ];

        creatClass(peole, protoProps, staticProps);

      }

};

 

总体来说分为3步骤

1.创建一个带有同名函数的函数对象

2.赋予实例属性

3.赋予静态属性

 

Extends与super 原理实现：

https://segmentfault.com/a/1190000010407445