JavaScript 原型鏈

image.png
原型鏈的運作過程:

__proto__屬性的作用就是當訪問一個對象的屬性時,如果該對象內部不存在這個屬性,那么就會去它的__proto__屬性所指向的那個對象(父對象)里找,一直找,直到__proto__屬性的終點Null,再往上找就相當于在Null上取值,會報錯。通過__proto__屬性將對象連接起來的這條鏈路即我們所謂的原型鏈。

原型鏈的注意點
  1. __proto__constructor屬性是對象所獨有的;

    • 對象的__proto__指是用于鏈接所有原型的屬性
    • 對象的__proto__指向它的構造函數(shù)的原型對象prototype)
    • 函數(shù)的__proto__屬性指向Function.prototype,即函數(shù)(function)都繼承于Function.prototype
    • 對象的constructor屬性的含義就是指向該對象的構造函數(shù),所有函數(shù)(function)最終的構造函數(shù)都指向Function
  2. prototype屬性是函數(shù)所獨有的,但因為函數(shù)也是一種對象,所以函數(shù)也擁有__proto__constructor屬性

    • 函數(shù)(function)是允許擁有屬性的。所有函數(shù)都會有一個特別的屬性 ——— prototype。
    • prototype屬性的作用就是讓該函數(shù)所實例化的對象們都可以找到公用的屬性和方法,即f1.__proto__ === Foo.prototype
  3. 原型鏈成因

    • 原型鏈是為了實現(xiàn)JavaScript的繼承機制
    • 幾乎所有JavaScript中的對象都是繼承于原型鏈頂端的Object的實例,即JavaScript的所有數(shù)據(jù)類型都是對象
繼承的三種方式
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()方法創(chuàng)建一個新對象,使用現(xiàn)有的對象來提供新創(chuàng)建的對象的__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
  });
}
閉包

閉包是由函數(shù)以及創(chuàng)建該函數(shù)的詞法環(huán)境組合而成。這個環(huán)境包含了這個閉包創(chuàng)建時所能訪問的所有局部變量。

參考
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內容