Javascript原型與原型鏈的理解

說明

  1. prototype屬性
    ? prototype 存在于構(gòu)造函數(shù)中 (其實(shí)任意函數(shù)中都有,只是不是構(gòu)造函數(shù)的時(shí)候prototype我們不關(guān)注而已) ,他指向了這個(gè)構(gòu)造函數(shù)的原型對象。
  2. constructor屬性
    constructor屬性存在于原型對象中,始終指向創(chuàng)建自身的構(gòu)造函數(shù),也可以說constructor的定義是要指向原型屬性對應(yīng)的構(gòu)造函數(shù)的,任何 function本身嚴(yán)格等于 function.prototype.constructor ,所以function.prototypefunction構(gòu)造函數(shù)的原型(但原型繼承需要重新指定function的constructor屬性)。
    Function // ? Function() { [native code] }
    Function.prototype.constructor // ? Function() { [native code] }
    Function === Function.prototype.constructor // true
    
    function Super() {}
    Super // ? Super() {}
    Super.prototype.constructor // ? Super() {}
    Super === Super.prototype.constructor // true
    Super.prototype === Super.prototype.constructor.prototype // true

    var su = new Super()
    su.constructor // ? Super() {}

一個(gè)簡單的原型繼承例子:


    function Super() {}
 
    function Sub() {}
    Sub.prototype = new Super();
    Sub.prototype.constructor = Sub;
    var sub = new Sub();
 
    Sub.prototype.constructor === Sub; // 2- true
    sub.constructor === Sub; // 4- true
    sub.__proto__ === Sub.prototype; // 5- true
    Sub.prototype.__proto__ == Super.prototype; // 7- true

這個(gè)例子中constructor指向會(huì)因?yàn)槟承┰驅(qū)е轮赶蜃兓?Sub.prototype.constructor = Sub;如果不加這一句,會(huì)變成Sub.prototype.constructor = Super,也就是上文中說的 constructor屬性存在于原型對象中,始終指向創(chuàng)建自身的構(gòu)造函數(shù)

  1. __proto__屬性(注意:左右各是2個(gè)下劃線)
    用構(gòu)造方法創(chuàng)建一個(gè)新的對象之后,這個(gè)對象中默認(rèn)會(huì)有一個(gè)不可訪問的屬性 [[prototype]] , 這個(gè)屬性就指向了構(gòu)造方法的原型對象。
  2. hasOwnProperty() 方法
    ? hasOwnProperty方法,可以判斷一個(gè)屬性是否來自對象本身。
    <script type="text/javascript">
        function Person () {
    
        }
        Person.prototype.name = "志玲";
        var p1 = new Person();
        p1.sex = "女";
        //sex屬性是直接在p1屬性中添加,所以是true
        alert("sex屬性是對象本身的:" + p1.hasOwnProperty("sex"));
        // name屬性是在原型中添加的,所以是false
        alert("name屬性是對象本身的:" + p1.hasOwnProperty("name"));
        //  age 屬性不存在,所以也是false
        alert("age屬性是存在于對象本身:" + p1.hasOwnProperty("age"));
    </script>
  1. isPrototypeOf()方法
    isPrototypeOf()函數(shù)用于指示對象是否存在于另一個(gè)對象的原型鏈中。如果存在,返回true,否則返回false。
    注:isPrototypeOf()instanceof 運(yùn)算符不同。在表達(dá)式 object instanceof AFunction中,object 的原型鏈?zhǔn)轻槍?AFunction.prototype 進(jìn)行檢查的,而不是針對 AFunction 本身。
    function Foo() {}
    function Bar() {}
    function Baz() {}

    Bar.prototype = Object.create(Foo.prototype);
    Baz.prototype = Object.create(Bar.prototype);

    var baz = new Baz();

    console.log(Baz.prototype.isPrototypeOf(baz)); // true
    console.log(Bar.prototype.isPrototypeOf(baz)); // true
    console.log(Foo.prototype.isPrototypeOf(baz)); // true
    console.log(Object.prototype.isPrototypeOf(baz)); // true
    console.log(Bar.prototype.isPrototypeOf(Baz.prototype));//true
    console.log(Foo.prototype.isPrototypeOf(Bar.prototype));//true
    console.log(Bar.prototype.isPrototypeOf(Foo.prototype));//false
    console.log(Foo.prototype.isPrototypeOf(Foo.prototype));//false
  1. instanceof
    instanceof 運(yùn)算符用來測試一個(gè)對象在其原型鏈中是否存在一個(gè)構(gòu)造函數(shù)的 prototype 屬性;也可以判斷一個(gè)實(shí)例是否屬于某種類型。
    語法:object instanceof constructor
    // 定義構(gòu)造函數(shù)
    function C(){} 
    function D(){} 

    var o = new C();


    o instanceof C; // true,因?yàn)?Object.getPrototypeOf(o) === C.prototype

    o instanceof D; // false,因?yàn)?D.prototype不在o的原型鏈上

    o instanceof Object; // true,因?yàn)镺bject.prototype.isPrototypeOf(o)返回true
    C.prototype instanceof Object // true,同上

  1. Object.getPrototypeOf()方法
    Object.getPrototypeOf() 方法返回指定對象的原型(內(nèi)部__proto__屬性指向的原型prototype)。
    語法:Object.getPrototypeOf(object)
    function Fn(){
            
    }
    var fn = new Fn();
    //通過getPrototypeOf靜態(tài)方法,獲得對象fn的prototype
    var proto = Object.getPrototypeOf(fn);
    //將獲得的prototype添加一個(gè)name屬性,并賦值
    proto.name = 'Monkey';
    //輸出對象fn.name
    console.log(fn.name); // ==> Monkey
    //判斷proto是否是Fn.prototype
    console.log( 'proto === Fn.prototype? ' + (proto === Fn.prototype) ); // ==> proto === Fn.prototype? true
    //判斷fn的__proto__是否指向了prototype
    console.log( proto.isPrototypeOf(fn)); // true

注意

  1. 實(shí)例化的對象和字面量定義對象與function不具有prototype屬性,直接定義函數(shù)或者new Function()創(chuàng)建的函數(shù)是具有prototype屬性的
    var str = new String('ss'); // ==>str 不具有prototype屬性
    <-------------------------------------------------------------------
    var obj = new Object('ss'); // ==>obj 不具有prototype屬性
    <-------------------------------------------------------------------
    function test(){

    }
    var tf = new test(); // ==>這里面 test 具有prototype屬性,但 tf 不具有
    <-------------------------------------------------------------------
    var fn = new Function(); // ==> fn 具有prototype屬性
  1. Object Created by Function
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容