javascript中的原型鏈?zhǔn)鞘裁?/h1>

發(fā)布時(shí)間：2021-07-21 10:29:24 來源：億速云 閱讀：137 作者：chen 欄目：web開發(fā)

本篇內(nèi)容主要講解“javascript中的原型鏈?zhǔn)鞘裁础?，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“javascript中的原型鏈?zhǔn)鞘裁础卑?

原型鏈其實(shí)就是有限的實(shí)例對(duì)象和原型之間組成有限鏈，就是用來實(shí)現(xiàn)共享屬性和繼承的。 存在兩個(gè)主要的問題：1、它不方便給父級(jí)類型傳遞參數(shù)；2、父級(jí)類型當(dāng)中的引用類型被所有的實(shí)例共享。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

new操作符具體干了什么呢?其實(shí)很簡(jiǎn)單，就干了三件事情。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

第一行，我們創(chuàng)建了一個(gè)空對(duì)象obj

第二行，我們將這個(gè)空對(duì)象的__proto__成員指向了Base函數(shù)對(duì)象prototype成員對(duì)象

第三行，我們將Base函數(shù)對(duì)象的this指針替換成obj，然后再調(diào)用Base函數(shù)，于是我們就給obj對(duì)象賦值了一個(gè)id成員變量，這個(gè)成員變量的值是”base”，關(guān)于call函數(shù)的用法。

在談原型鏈之前，我們首先要了解自定義函數(shù)與 Function 之間是什么關(guān)系，而構(gòu)造函數(shù)、原型和實(shí)例之間又存在什么千絲萬縷的關(guān)系呢？其實(shí)，所有的函數(shù)都是 Function 的實(shí)例。在構(gòu)造函數(shù)上都有一個(gè)原型屬性 prototype，該屬性也是一個(gè)對(duì)象；那么在原型對(duì)象上有一個(gè) constructor 屬性，該屬性指向的就是構(gòu)造函數(shù)；而實(shí)例對(duì)象上有一個(gè) _proto_  屬性，該屬性也指向原型對(duì)象，并且該屬性不是標(biāo)準(zhǔn)屬性，不可以用在編程中，該屬性用于瀏覽器內(nèi)部使用。

// _proto_
在函數(shù)里有一個(gè)屬性prototype
由該函數(shù)創(chuàng)建的對(duì)象默認(rèn)會(huì)連接到該屬性上
    //prototype 與 _proto_ 的關(guān)系
_proto_是站在對(duì)象角度來說的
prototype 是站在構(gòu)造函數(shù)角度來說的

　　下面，我們來看圖說話。

1、構(gòu)造函數(shù)、原型和實(shí)例之間的關(guān)系

①+Object

 var obj = new Object(); 對(duì)象是有原型對(duì)象的 原型對(duì)象也有原型對(duì)象    obj._proto_._proto_._proto_ 原型對(duì)象也有原型對(duì)象，對(duì)象的原型對(duì)象一直往上找，會(huì)找到一個(gè)null // 原型鏈?zhǔn)纠?    var arr = [];    arr -> Array.prototype ->Object.prototype -> null    var o = new Object();    o -> Object.prototype -> null;

function Foo1(){
   this.name1 = '1';
}
function Foo2(){
   this.name2 = '2';
}
Foo2.prototype = new Foo1();
function Foo3(){
   this.name = '3';
}
Foo3.prototype = new Foo2();
var foo3 = new Foo3();
console.dir(foo3);

function Animal(name){        this.name = name;    }    function Tiger(color){        this.color = color;    } //   var tiger = new Tiger('yellow'); //   console.log(tiger.color); //   console.log(tiger.name);  //undefined //      Tiger.prototype = new Animal('老虎');   //一種方式    Object.prototype.name = '大老虎';   //第二種方式         var tiger = new Tiger('yellow');         console.log(tiger.color);         console.log(tiger.name);

值得注意的是，這里存在兩個(gè)主要的問題： ①它不方便給父級(jí)類型傳遞參數(shù)；②父級(jí)類型當(dāng)中的引用類型被所有的實(shí)例共享

2）ES5 提供了Object.create() 方法來實(shí)現(xiàn)繼承

————做兼容
  //shim墊片
    function create(obj){
        if(Object.create){
            return Object.create(obj);
        }else{
            function Foo(){}
            Foo.prototype = obj;
            return new Foo();
        }
    }

　　這種方法是ES5的新特性，其實(shí)就是復(fù)制繼承。

　　 3）拷貝繼承

var obj = {};
obj.extend = function(obj){
    for(var k in obj){
      this[k] = obj[k];
    }
}

　4）借用構(gòu)造函數(shù)繼承

——被借用的構(gòu)造函數(shù)中原型上的成員沒有被借過來

function Animal(name){
    this.name = name;
}
function Mouse(nickname){
    Animal.call(this,'老鼠');
    this.nickname = nickname;
}
var m = new Mouse('杰瑞');
console.log(m.name);
console.log(m.nickname);

　　存在的問題：可以解決原型繼承當(dāng)中傳參問題，但是父類型當(dāng)中的原型對(duì)象上的成員（屬性和方法）不能被繼承到

　　5）組合繼承

——prototype對(duì)象是有動(dòng)態(tài)性的

function Person(name){
   this.name = name;
}
Person.prototype.showName = function(){
   console.log(this.name);
}
function Student(name,age){
   Person.call(this,name);
   this.age = age;
}
Student.prototype = new Person();
Student.prototype.contructor = Student;
Student.prototype.showAge = function(){
    console.log(this.age);
}
var stu = new Student('張三',12);
stu.showName();
stu.showAge();

【原型繼承+借用構(gòu)造函數(shù)繼承】它的特點(diǎn)就是屬性每個(gè)實(shí)例一份，方法共享

【小結(jié)】套用一句很粗暴的話，所謂原型鏈就是找媽的一種行為方式，就可以理解為人是人他媽生的，妖是妖他媽生的。原型鏈的核心其實(shí)就只有一個(gè)：屬性共享和獨(dú)立的控制，當(dāng)你的對(duì)象實(shí)例需要獨(dú)立的屬性，所有做法的本質(zhì)都是在對(duì)象實(shí)例里面創(chuàng)建屬性。若不考慮太多，你大可以在Person里面直接定義你所需要獨(dú)立的屬性來覆蓋掉原型的屬性。總之，使用原型繼承的時(shí)候，要對(duì)于原型中的屬性要特別注意，因?yàn)樗麄兌际菭恳话l(fā)而動(dòng)全身的存在。現(xiàn)在最常用的方法是組合模式。

1、原型鏈

1）構(gòu)造函數(shù)、原型和實(shí)例的關(guān)系

①構(gòu)造函數(shù)都有一個(gè)屬性prototype，這個(gè)屬性是一個(gè)對(duì)象（Object的實(shí)例）

②原型對(duì)象prototype里面有一個(gè)constructor屬性，該屬性指向原型對(duì)象所屬的構(gòu)造函數(shù)

③實(shí)例對(duì)象都有一個(gè)_proto_屬性，該屬性也指向構(gòu)造函數(shù)的原型對(duì)象，它是一個(gè)非標(biāo)準(zhǔn)屬性，不可以用于編程，它是用于瀏覽器自己使用的

2）prototype與_proto_的關(guān)系

①prototype是構(gòu)造函數(shù)的屬性

②_proto_是實(shí)例對(duì)象的屬性

——這兩者都指向同一個(gè)對(duì)象

【總結(jié)】i）函數(shù)也是對(duì)象，對(duì)象不一定是函數(shù)；

ii）對(duì)象的本質(zhì)：無序的鍵值對(duì)集合；鍵值對(duì)當(dāng)中的值可以是任意數(shù)據(jù)類型的值

iii）對(duì)象就是一個(gè)容器，這個(gè)容器當(dāng)中放的是（屬性和方法）

3）屬性搜索

　?、僭谠L問對(duì)象的某個(gè)成員的時(shí)候會(huì)先在對(duì)象中找是否存在

　　②如果當(dāng)前對(duì)象中沒有就在構(gòu)造函數(shù)的原型對(duì)象中找

　?、廴绻蛯?duì)象中沒有找到就到原型對(duì)象的原型上找

　?、苤繭bject的原型對(duì)象的原型是null為止

2、Function

——所有函數(shù)都是Function的實(shí)例

①本地對(duì)象：獨(dú)立于宿主環(huán)境（瀏覽器）的對(duì)象——包括Object、Array、Date、RegExp、Function、Error、Number、String、Boolean

②內(nèi)置對(duì)象——包括Math、Global（window，在js中就是全局變量），使用的時(shí)候不需要new

③宿主對(duì)象——包括自定義對(duì)象、DOM、BOM

到此，相信大家對(duì)“javascript中的原型鏈?zhǔn)鞘裁础庇辛烁畹牧私?，不妨來?shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！