JavaScript 原型链

image.png

原型链的运作过程：

__proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（父对象）里找，一直找，直到__proto__属性的终点Null，再往上找就相当于在Null上取值，会报错。通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。

原型链的注意点

__proto__和constructor属性是对象所独有的；
- 对象的__proto__指是用于链接所有原型的属性
- 对象的__proto__指向它的构造函数的原型对象（prototype)
- 函数的__proto__属性指向Function.prototype，即函数(function)都继承于Function.prototype
- 对象的constructor属性的含义就是指向该对象的构造函数，所有函数(function)最终的构造函数都指向Function。
prototype属性是函数所独有的，但因为函数也是一种对象，所以函数也拥有__proto__和constructor属性
- 函数(function)是允许拥有属性的。所有函数都会有一个特别的属性 ——— prototype。
- prototype属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法，即f1.__proto__ === Foo.prototype。
原型链成因
- 原型链是为了实现JavaScript的继承机制
- 几乎所有JavaScript中的对象都是继承于原型链顶端的Object的实例，即JavaScript的所有数据类型都是对象

继承的三种方式

function Animal1() {

}

Animal1.prototype.sleep = function (value) {
    console.log("睡觉1")
};

function Cat1() {
    this.name = "猫1";
}

Cat1.prototype = Animal1.prototype;

Object.create = function (o) {
    function F() {
    }

    F.prototype = o;
    return new F();
};
let obj = {
    name: "cat2",
    jiao: function () {
        console.log("喵喵2");
    }
};
let obj1 = Object.create(obj);
obj1.jiao();


let obj3 = {
    createObject() {
        let o = {};
        o.name = 3;
        o.work = function () {
            console.log("run");
        };
        return o;
    }
};

let obj4 = {
    createObject() {
        let o = obj3.createObject();
        o.name = "obj4";
        return o;
    }
};
let object = obj4.createObject();

Object.create()与Object.assign()源码分析

Object.create()
Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。

if (typeof Object.create !== "function") {
    Object.create = function (proto, propertiesObject) {
        if (typeof proto !== 'object' && typeof proto !== 'function') {
            throw new TypeError('Object prototype may only be an Object: ' + proto);
        } else if (proto === null) {
            throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");
        }

        if (typeof propertiesObject != 'undefined') throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");

        function F() {}
        F.prototype = proto;

        return new F();
    };
}

Object.assign()
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
该对象属于浅拷贝，如果某个属性存储的值是引用变量的地址的话，仍然会改变新生成的Object实例

if (typeof Object.assign != 'function') {
  // Must be writable: true, enumerable: false, configurable: true
  Object.defineProperty(Object, "assign", {
    value: function assign(target, varArgs) { // .length of function is 2
      'use strict';
      if (target == null) { // TypeError if undefined or null
        throw new TypeError('Cannot convert undefined or null to object');
      }

      let to = Object(target);

      for (var index = 1; index < arguments.length; index++) {
        var nextSource = arguments[index];

        if (nextSource != null) { // Skip over if undefined or null
          for (let nextKey in nextSource) {
            // Avoid bugs when hasOwnProperty is shadowed
            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
              to[nextKey] = nextSource[nextKey];
            }
          }
        }
      }
      return to;
    },
    writable: true,
    configurable: true
  });
}

闭包

闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。

JavaScript 原型链

原型链的运作过程：

原型链的注意点

继承的三种方式

Object.create()与Object.assign()源码分析

闭包

参考