JS原型链相关内容总结

一.创建对象有几种方法

在ES6中（和ES5相比），class的new实例有以下特点：
class的构造参数必须是new来调用，不可以将其作为普通函数执行
es6 的class不存在变量提升
最重要的是：es6内部方法不可以枚举。es5的prototype上的方法可以枚举。
(= = 这句我也没看懂 ，待我查一查再来更。)

方法一:

var o1 = {name:'o1'};//自变量对象
var o11 = new Object({name:'o11'});//通过new Object生成对象
o1,o11 实例，只要是对象就是实例

方法二:通过构造函数

 var M = function(){
        this.name = 'o2'
    }
//先var一个函数    
 var o2 = new M();
 //使用构造函数来生成对象
 o2实例  M为构造函数
 凡是通过new生成的函数都是构造函数 M

方法三：工厂模式

工厂模式通过将对象的创建封装到一个方法中，再通过在调用该方法时传入参数而实现对象的实例化，解决了以上提到的产生大量重复代码的问题，如下所示：

function createPerson(age, name) { 
//1.在函数内new一个对象，
    var o = new Object();
    o.age = age;
    o.name = name;
    o.code = function() {
         console.log('hello world!');
    };
//2.return该实例    
    return o;
}
var person1 = createPerson(11, '小白');
var person2 = createPerson(12, '小黑');

//封装好一个函数，直接可以拿来用。

方法四:构造函数模式

原型模式是通过将所有的属性和方法都定义在其prototype属性上，达到这些属性和方法能被所有的实例所共享的目的。代码如下所示：

function Person(age, name) { 
//函数内不需要new一个对象，直接写
    Person.prototype.age = age;
    Person.prototype.name = name;
    Person.prototype.code = function() {
         console.log('hello world！');
    };
//无需return    
}
 
var person1 = new Person();
var person2 = new Person();

方法五：构造函数+原型组合模式

这个这个这个。这个我也没太弄清楚，放个小实例，大家自行百度吧。

function  Person(age, name) { 
    this.age = age;
    this.name = name;
    this.cry = function() {
         console.log(name + 'is crying!!! T^T');
    }
}
Person.prototype = {
    constructor: Person,
    sayName: function() {
        console.log(this.name);
    }
}
var person1 = new Person(11, '小白');
var person2 = new Person(12, '小黑');

以上几种方法的利弊，这里有详细说明：
https://blog.youkuaiyun.com/liuyan19891230/article/details/50765312

= = 这里墨迹的太多了，下面进入原型链！！！

二.原型，构造函数，实例，原型链

上文中的 o1 o11 o2 都是实例
任何一个函数只要被new使用，后面这个函数就是构造函数

    var o2 = new M();

构造函数（M）可以使用new运算符来生成一个实例（o2）

构造函数也是函数，任何函数都可以当成构造函数，函数都有一个prototype属性，声明一个函数的时候js自动给它加上。它指向原型对象（初始化一个空对象（原型对象））
原型对象中会有一个 构造器construstor 指向一个函数（构造函数）

构造函数（M）的prototype的construstor严格等于它本身！！！

三.instanceof原理

实例对象---------------------->构造函数
proto------->instanceof----->prototype------------->原型
来判断实例对象的属性和构造函数的属性判断是不是同一个引用，如果原型还有自己的构造函数，用实例对象来判断原型的构造函数一样也是true,这样不是很严谨。
例子：
o2 instanceof M true
o2 instanceof Object true
o2.proto === M.prototype true 实例对象的属性指向原型对象
M.prototype._proto === Object.prototype true 原型对象的属性指向Object
o2.proto.constructor === M true
o2.proto.constructor === Object false 判断是否是构造函数直接生成

四.new运算符

一个新对象被创建。它继承自foo.prototype 构造函数foo被执行。
执行的时候，相应的参数会被传入，同时上下文（this）会被指定这个新实例。
new foo 等同于 new foo(),只能用在不传递任何参数的情况。
如果构造函数返回了一个“对象“，那么这个对象会取代整个new出来的结果。
如果构造函数没有返回对象，那么new出来的结果为步骤1创建的对象。

模拟new运算符

 var new2 = function(func){
            //1.先要生成新对象，新对象要继承构造函数的原型对象
            var o = Object.create(func.prototype)
            //2.执行构造函数,call用来转移上下文
            var k =func.call(o)
            //3.判断构造函数执行完的结果是不是对象类型
            if(typeof k === 'object'){
                return k
            }else{
                return o
            }
        }

总结一些常见问题：

题目：
1.如何准确判断一个变量是数组类型

  var arr = []
  console.log(typeof arr) //object
  console.log(arr instanceof Array)  //true
  console.log(Array.isArray(arr))  //true

2.写一个原型链继承的例子，一个dom查询的例子。

function Elem(id) {
        this.elem = document.getElementById(id)
    }
    Elem.prototype.html = function (val){
        var elem = this.elem;
        if (val) {
            elem.innerHTML = val
            return this //为了链式操作
        } else {
            return elem.innerHTML
        }
    }
    Elem.prototype.on =  function (type,fn){
        var elem = this.elem
        elem.addEventListener(type,fn)
    }
    var div1 = new Elem('div1')

3.描述 new 一个对象的过程，创建一个新对象， this指向这个新对象[[Prototype]]， 这个新对象会绑定到函数调用的this， 执行代码，即对这个this赋值，返回this，手写一个new。

function create() {
    // 创建一个空的对象
    let obj = new Object()
    // 获得构造函数
    let Con = [].shift.call(arguments)
    // 链接到原型
    obj.__proto__ = Con.prototype
    // 绑定 this，执行构造函数
    let result = Con.apply(obj, arguments)
    // 确保 new 出来的是个对象
    return typeof result === 'object' ? result : obj
}

1、用new Object()的方式新建了一个对象obj
2、取出第一个参数，就是我们要传入的构造函数。此外因为 shift 会修改原数组，所以 arguments会被去除第一个参数
3、将 obj的原型指向构造函数，这样obj就可以访问到构造函数原型中的属性
4、使用apply，改变构造函数this 的指向到新建的对象，这样 obj就可以访问到构造函数中的属性
5、返回 obj

原型规则和示例

原型规则是学习原型链的基础
1.所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（除了“null“意外 ）

//可扩展属性   
    var obj = {}; obj.a = 100;
    var arr = []; arr.a = 100;
    function fn () {}
    fn.a = 100;

2.所有的引用类型（数组、对象、函数），都有一个_proto_属性，属性值是一个普通的对象
3.所有的函数，都有一个prototype属性，属性值也是一个普通的对象
4.所有的引用类型（数组、对象、函数），_proto_属性都指向它的构造函数的“prototype“属性值

obj.__proto__ === Object.prototype

5.当试图得到一个对象的某个属性时，如何这个对象本身没有这个属性，那么去它的_proto_（即它的构造函数prototype）中寻找。

 var f = new Foo('zhangsan')
    f.printName = function() {
        console.log(this.name)
    }
    f.alartName()
    f.printName()

原型链

 f.toString()//要去f.__proto__.__proto__去找

instansceof
用于判断引用类型属于哪个构造函数
f instansceof Foo 的判断逻辑是
f的_proto_一层一层往上找看是否能对应到Foo的prototype属性

今天分享到这，下次见！