超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

JS的原型介紹及原型的繼承

2020-3-18    前端達(dá)人

前言

在學(xué)習(xí)JS中的原型,原型鏈,繼承這些知識(shí)之前,我們先學(xué)習(xí)下基礎(chǔ)知識(shí):函數(shù)和對(duì)象的關(guān)系。

我們一直都知道,函數(shù)也是對(duì)象的一種,因?yàn)橥ㄟ^(guò)instanceof就可以判斷出來(lái)。但是函數(shù)和對(duì)象的關(guān)系并不是簡(jiǎn)單的包含和被包含的關(guān)系,這兩者之間的關(guān)系還是有點(diǎn)復(fù)雜的。接下來(lái)我們就來(lái)捋一捋。



首先,闡述一點(diǎn),對(duì)象都是通過(guò)函數(shù)創(chuàng)建的

對(duì)于下面這種類型的代碼,一般叫做“語(yǔ)法糖”

var obj = {a:10,b:20};
var arr = [5, 'x', true];



但是,其實(shí)上面這段代碼的實(shí)質(zhì)是下面這樣的:


//var obj = { a: 10, b: 20 };
//var arr = [5, 'x', true];

 var obj = new Object();
 obj.a = 10;
 obj.b = 20;

 var arr = new Array();
 arr[0] = 5;
 arr[1] = 'x';
 arr[2] = true;



而Object和Array都是函數(shù),可以自己用typeof函數(shù)進(jìn)行驗(yàn)證。
所以,可以得出:對(duì)象都是通過(guò)函數(shù)創(chuàng)建的

正文
說(shuō)完了前言,接下來(lái)我們進(jìn)入正題。

原型prototype
在前言中,我們說(shuō)了函數(shù)也是一種對(duì)象,所以函數(shù)也是屬性的集合,同時(shí),也可以對(duì)函數(shù)進(jìn)行自定義屬性。
每個(gè)函數(shù)都有一個(gè)屬性——prototype。這個(gè)prototype的屬性值是一個(gè)對(duì)象(屬性的集合),默認(rèn)只有一個(gè)叫做constructor的屬性,指向這個(gè)函數(shù)本身.

“隱式原型”proto
我們先看一段非常常見的代碼:
function Fn() { }
   Fn.prototype.name = '張三';
    Fn.prototype.getAge = function () {
       return 12;
};
   var fn = new Fn();
   console.log(fn.name);
   console.log(fn.getAge ());

即,F(xiàn)n是一個(gè)函數(shù),fn對(duì)象是從Fn函數(shù)new出來(lái)的,這樣fn對(duì)象就可以調(diào)用Fn.prototype中的屬性。

但是,因?yàn)槊總€(gè)對(duì)象都有一個(gè)隱藏的屬性——“proto”,這個(gè)屬性引用了創(chuàng)建這個(gè)對(duì)象的函數(shù)的prototype。即:fn.proto === Fn.prototype
那么,這里的_proto_到底是什么呢?

其實(shí),這個(gè)__proto__是一個(gè)隱藏的屬性,javascript不希望開發(fā)者用到這個(gè)屬性值,有的低版本瀏覽器甚至不支持這個(gè)屬性值。

var obj = {};
console.log(obj.__proto__);

每個(gè)對(duì)象都有一個(gè)_proto_屬性,指向創(chuàng)建該對(duì)象的函數(shù)的prototype。

構(gòu)造函數(shù)、原型、實(shí)例之間的關(guān)系
實(shí)例,原型對(duì)象,構(gòu)造函數(shù),三者之間的關(guān)系:

(1) 實(shí)例有__proto__屬性指向原型對(duì)象

(2) 原型對(duì)象有constructor指針指向構(gòu)造函數(shù)

(3)構(gòu)造函數(shù)又有prototype屬性指向原型對(duì)象
點(diǎn)擊查看原圖


實(shí)例和原型關(guān)系檢測(cè)

isPrototypeOf()函數(shù),用于檢測(cè)兩個(gè)對(duì)象之間似乎否存在原型關(guān)系,使用方法如下:

  // 查看 Fn 的 prototype 對(duì)象,是否是 f 原型
  Fn.prototype.isPrototypeOf(f);   



 //// 查看 f 對(duì)象是否是構(gòu)造函數(shù) Fn 的實(shí)例
 //console.log(f instanceof Fn); 
 //// 查看 f 對(duì)象是否是構(gòu)造函數(shù) Fn 的實(shí)例    
 //console.log(f instanceof Object); 

    function Fn(){}
    function Fun(){}
    var f = new Fn();
    console.log( f.__proto__ === Fn.prototype );            // t

    console.log( Fn.prototype.isPrototypeOf(f) );           // t
    console.log( Fun.prototype.isPrototypeOf(f) );          // f
    console.log( Object.prototype.isPrototypeOf(f) );       // t

    console.log( f instanceof Fn );         // t
    console.log( f instanceof Fun );        // f
    console.log( f instanceof Object );     // t
//兩種使用,如果是返回ture,如果不是返回false;
//注意:instanceof運(yùn)算符右側(cè)為構(gòu)造函數(shù),并且js中所有原型都來(lái)自O(shè)bject構(gòu)造函數(shù)。

JS解析器訪問(wèn)屬性順序
當(dāng)訪問(wèn)實(shí)例 f 的屬性或方法時(shí),會(huì)先在當(dāng)前實(shí)例對(duì)象 f 中查找,如果沒有,則沿著__proto__繼續(xù)向上尋找,如果找到最頂頭的Object還是找不到,則會(huì)拋出undefined。如果在實(shí)例中找到,或某層原型中找到,就會(huì)讀取并使用,同時(shí)停止向上找尋。
由此可見,解析器的解析順序遵循就近原則,如果在最近的位置發(fā)現(xiàn)屬性存在,便不會(huì)繼續(xù)向上找尋。

原型的應(yīng)用
數(shù)組去重:

Array.prototype.noRepeat = function(){
    var m = [];
    for(var i=0;i<this.length;i++){
        if(m.indexOf(this[i]) == -1){
            m.push(this[i]);
        }
    }
    return m;
}
var arr = [3,4,5,6,7,6,5,4,3,2,1];
var res = arr.noRepeat();
console.log(res);

var arr1 = ["a","b","c","b","a"];
var res1 = arr1.noRepeat();
console.log(res1);



function Parent(){

}
Parent.prototype.show = function(){
    console.log("哈哈哈");
}

function Child(){

}
for(var i in Parent.prototype){
    Child.prototype[i] = Parent.prototype[i];
}
Child.prototype.show = function(){
    console.log("hello");
}

var p = new Parent();
p.show();
console.log(p.name);

var c = new Child();
c.show();
console.log(c.name);



————————————————
版權(quán)聲明:本文為CSDN博主「zyfacd」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/zyfacd/article/details/104909948

分享本文至:

日歷

鏈接

個(gè)人資料

存檔