读书笔记-你不知道的JS上-混入与原型

继承

 

mixin混合继承

    function mixin(obj1, obj2) {
        for (var key in obj2) {
            //重复不复制
            if (!(key in obj1)) {
                obj1[key] = obj2[key];
            }
        }
        return obj1;
    }

  这种复制是浅复制,对象或者数组函数等都是同一个引用,改变obj1的会同时影响obj2。

 

寄生继承

  ...

 

隐式继承

  子类调用fn.call(this)

 

  深拷贝需要重新声明一个变量(对象),遍历(递归)复制,详情见我的函数技巧,不贴出来了。

 

 

原型

  Javascript对象中有一个特殊的[[prototype]]内置属性,其实就是对于其他对象的引用。几乎所有的对象在创建时[[prototype]]属性都会被赋予一个非空的值。

    var f = {
        a: 1
    };
    // 创建一个对象 原型为f
    var f2 = Object.create(f);
    // 通过原型链找到了属性a
    console.log(f2.a);

  使用for..in遍历对象的原理和原型链类似,任意可枚举在原型链上的属性都会被遍历。使用in操作符检查属性时也会查找对象原型链,无论是否可枚举。

  所有普通对象的原型最终指向Object.prototype。

  详细讲解一个对象赋值语句:

    var obj = {};
    obj.a = 1;

  这里有四种情况:

  1、obj中存在a属性,就会被修改。

    var obj = {
        a: 2
    };
    obj.a = 1;
    console.log(obj.a); //1

  2、obj的原型链不存在a属性,就会被直接添加到obj上。

    var obj = {};
    console.log('a' in obj); //false
    obj.a = 1;
    console.log(obj.a); //1

  3、obj与obj的原型链都存在a属性,就会发生屏蔽,obj中的a会屏蔽原型链上的a。

    var obj2 = {
        a: 2
    };
    var obj = Object.create(obj2);
    obj.a = 1;
    console.log(obj.a); //1

  4、obj的原型链上存在a属性,而obj不存在时,会出现多种情况。

  在原型链上存在a属性且没有被标记为只读,那就会直接在obj添加一个a属性。(情况3)

  在原型链上存在a属性且被标记为只读,那么无法创建该属性,严格模式会报错,普通模式赋值语句会被忽略。

    // 在'use strict'模式下
    // Cannot assign to read only property 'a' of object '#<Object>'
    var obj2 = {};
    Object.defineProperty(obj2, 'a', {
        value: 2,
        configurable: true,
        enumerable: true,
        writable: false
    })
    var obj = Object.create(obj2);
    obj.a = 1; //无效
    console.log(obj.a); //2

  如果在原型链上存在a并且它是一个setter,那就一定会调用这个setter。a不会被添加到obj,也不会重新定义setter。

    var obj2 = {
        set a(val) {
            console.log(1);
        }
    };
    var obj = Object.create(obj2);
    obj.a = 1; // 执行set并输出1

  如果希望怎么样都添加属性,请使用Object.defineProperty(...)。

 

关于prototype

  所有函数默认都会拥有一个名为prototype的公有不可枚举属性,它会指向另外一个对象:

    function fn() {
        console.log(1);
    }
    console.log(fn.prototype); //Object{}

 

  这个对象通常被称为fn的原型,实际上不如叫fn.prototype。

    function fn() {
        console.log(1);
    }
    var f = new fn();
    console.log(f.__proto__ === fn.prototype); //true

  在调用new fn()时,会创建一个对象,并给一个内部[[prototype]]链接,连接到fn.prototype。个人感觉__proto__这个浏览器私有实现的属性叫原型比较好,毕竟原型链是通过这个属性向上查找的。

  实际上,new操作符实际上并没有直接创建关联,这只是一个副作用。

  通过Object.create()方法才是正规创建原型链接的方法。

  上一段代码很容易让人认为fn是一个构造函数,因为这里用new来调用它并构造出一个对象。

  实际上,fn和普通的函数没有区别。函数本身不是构造函数,当在普通的函数前面加上new时,就会把这个函数调用变成了一个‘构造函数调用’。实际上,new会劫持所有普通函数并用构造形式来调用它。

  

  考虑下面一段代码。

    function fn(a) {
        this.a = a;
    }
    fn.prototype.getA = function() {
        return this.a;
    }
    var f1 = new fn(1);
    var f2 = new fn(2);
    console.log(f1.getA()); //1
    console.log(f2.getA()); //2

   这段代码展示了两种面向类的技巧:

  1、this.name=name给每个对象都绑定了.name属性。

  2、fn.prototype.getA=...给原型添加了一个方法,现在,每一个实例都可以调用getA方法。

  看起来,似乎创建f1、f2时会把对象复制到这两个新对象中,然而实际上只是通过原型链向上查找调用了方法而已。

 

关于constructor

    function fn1() {};
    var f1 = new fn1();
    console.log(f1.constructor === fn1); //true
    //替换默认原型
    function fn2() {};
    fn2.prototype = {};
    var f = new fn2();
    console.log(f.constructor === fn2); //false
    console.log(f.constructor === Object); //true

  当前用新对象替换fn原型时,new出来的新对象不会自动获得constructor属性。所以,不能说因为f.constructor===fn属性,就认为fn构造了对象f。

  实际上,new出来的对象f并没有.constructor属性,它会委托原型去查找该属性,默认的原型(fn.prototype)有construtor属性并且指向fn,所以f.constructor(实际上调用的是fn.prototype.constructor)会指向fn。但是如果替换了fn.prototype,新的原型对象并不会默认有.construtor,于是委托会一直提交到Object.prototype,恰好Object.prototype.constructor===Object,结果也在上面代码中展示出来了。

  可以手动给新原型添加constructor属性:

    function fn2() {};
    fn2.prototype = {};
    fn2.prototype.constructor = fn2; //修正原型链
    var f = new fn2();
    console.log(f.constructor === fn2); //true
    console.log(f.constructor === Object); //false

  看,修复了!(实际上应该用Object.defineProperty来定义constructor,因为该属性应该是不可枚举的)

  所以说,constructor并不是一个不可变属性,它只是默认不可枚举,但是值可以被任意修改。

 

原型继承

  常见误用形式和正确使用方式:

    function fn1() {};

    function fn2() {};
    //不可以 只是复制引用
    //fn1.prototype = fn2.prototype;
    //可以实现 但是会执行fn2函数 可能出现额外问题
    //fn1.prototype=new fn2;
    //ES6前 需要抛弃fn1默认的prototype 可能还要修正constructor属性
    fn1.prototype = Object.create(fn2.prototype);
    //ES6语法 直接修正默认prototype
    Object.setPrototypeOf(fn1.prototype, fn2.prototype);

  

  如何找出任意对象的原型链呢?有一个方法是instanceof。

    function fn() {}
    var f = new fn;
    console.log(f instanceof fn); //true

  instanceof操作符左边是一个对象,右边是一个函数。该操作解决的问题是:在f的原型链上,是否有fn.prototype对象?(通过bind强绑生成的函数没有prototype属性)

  如果要直接判断两个对象是否存在原型关系,可以用以下几个方法:

    function fn() {}
    var f = new fn;
    //是否是原型关系
    console.log(fn.prototype.isPrototypeOf(f)); //true
    //展示原型
    console.log(Object.getPrototypeOf(f)); //Object{}
    //浏览器私有实现
    console.log(f.__proto__); //Object{}

  绝大多数浏览器支持__proto__方法来访问[[prototype]]属性。(__开头的属性表明这不是ECMA标准,还有很多其他的属性也以__开头)

  现在ES6可以用Object.getPrototypeOf()与Object.setPropertyOf()来获取和设置原型,相当于原生支持了__proto__。

  

  Object.create()会创建一个对象,并关联到参数对象中,避免了new操作符与生成对应的constructor,prototype。

  如果旧浏览器不支持,可以用下面的代码模拟:

    if (!Object.create) {
        Object.create = function(o) {
            function f() {};
            f.prototype = o;
            return new f();
        }
    }

  关于new操作符和原型,如果下面的代码可以理解,那就没问题了~

    function fn(a) {
        this.a = a;
    }
    fn.prototype = {};
    Object.defineProperty(fn.prototype, 'a', {
        value: 1,
        configurable: true,
        enumerable: true,
        writable: false
    });
    //严格模式new会报错
    var f = new fn(3);
    console.log(f); //无效!
    console.log(f.a); //1

  完结撒花!

 

原文地址:https://www.cnblogs.com/QH-Jimmy/p/6477143.html