快捷導(dǎo)航

JavaScript模擬實(shí)現(xiàn)封裝的三種方式及寫(xiě)法區(qū)別

更新時(shí)間：2017年10月27日 09:09:15 作者：姐姐jy

JS是一門(mén)面向?qū)ο笳Z(yǔ)言,其對(duì)象是用prototype屬性來(lái)模擬的。下面通過(guò)本文來(lái)了解下js模擬實(shí)現(xiàn)封裝的三種方法，需要的朋友參考下吧

前言

　繼承是使用一個(gè)子類(lèi)繼承另一個(gè)父類(lèi)，那么子類(lèi)可以自動(dòng)擁有父類(lèi)中的所有屬性和方法，這個(gè)過(guò)程叫做繼承！ JS中有很多實(shí)現(xiàn)繼承的方法，今天我給大家介紹其中的三種吧。

1.在 Object類(lèi)上增加一個(gè)擴(kuò)展方法

//聲明一個(gè)父類(lèi)
function Person(name){
 this.name=name;
 this.age=age;
 this.say=function(){
   alert("我叫"+this.name);
 }
}
//聲明一個(gè)子類(lèi) 
function Student(){
 this.no=no;
 this.study=function(){
  alert("我在學(xué)習(xí)！");
 }
}
// 通過(guò)循壞，將父類(lèi)對(duì)象的所有屬性和方法，全部賦給子類(lèi)對(duì)象
Object.prototype.extend=function(parent){
 for(var i in parent){
   this[i].parent[i];
 }
}
var p=new Person("張三",12);
var s=new Student("1234567");
//子類(lèi)對(duì)象調(diào)用這個(gè)擴(kuò)展方法
s.extend()
console.log(s);

上述實(shí)現(xiàn)繼承的原理：

通過(guò)循壞，將父類(lèi)對(duì)象的所有屬性和方法，全部賦給子類(lèi)對(duì)象。關(guān)鍵點(diǎn)在于for-in循壞，即使不擴(kuò)展Object,也能通過(guò)簡(jiǎn)單的循壞實(shí)現(xiàn)操作。

但是用這種方法實(shí)現(xiàn)繼承也有一些缺點(diǎn)：

①無(wú)法通過(guò)一次實(shí)例化，直接拿到完整的子類(lèi)對(duì)象。而需要先拿到父類(lèi)對(duì)象和子類(lèi)對(duì)象兩個(gè)對(duì)象，再手動(dòng)合并；

②擴(kuò)展Object的繼承方法，也會(huì)保留在子類(lèi)的對(duì)象上。

再來(lái)看看第二種實(shí)現(xiàn)繼承的方法吧~

2.使用原型繼承

在介紹這種方法之前先來(lái)說(shuō)兩個(gè)概念：原型對(duì)象與原型

1、prototype:函數(shù)的原型對(duì)象

①只有函數(shù)才有prototype，而且所有函數(shù)必有prototype

②prototype本身也是一個(gè)對(duì)象！

③prototype指向了當(dāng)前函數(shù)所在的引用地址！

2、__proto__:對(duì)象的原型！

①只有對(duì)象才有__proto__，而且所有對(duì)象必有__proto__

②__proto__也是一個(gè)對(duì)象，所以也有自己的__proto__，順著這條線向上照的順序，就是原型鏈。

③函數(shù)、數(shù)組都是對(duì)象，都有自己的__proto__

//聲明父類(lèi)
function Person(name,age){
   this.name=name;
   this.age=age;
   this.say=function(){
    alert("我叫"+this.name);
   }
}
//聲明子類(lèi)   
function Student(no){
   this.no=no;
   this.study=function(){
    alert("我在學(xué)習(xí)！我叫"+this.name+"今年"+this.age");
   }
}
//將父類(lèi)對(duì)象賦給子類(lèi)的prototype  
Student.prototype=new Person("張三",14);
//拿到子類(lèi)對(duì)象時(shí)，就會(huì)將父類(lèi)對(duì)象的所有屬性和方法，添加到__proto__
var s=new Student(); 
s.study();

使用原型繼承的原理：

將父類(lèi)對(duì)象，賦值給子類(lèi)的prototype，那么父類(lèi)對(duì)象的屬性和方法就會(huì)出現(xiàn)在子類(lèi)的prototype中。那么，實(shí)例化子類(lèi)時(shí)，子類(lèi)的prototype又會(huì)到子類(lèi)對(duì)象的__proto__中，最終，父類(lèi)對(duì)象的屬性和方法，會(huì)出現(xiàn)在子類(lèi)對(duì)象的__proto__中。

這種繼承的特點(diǎn)：

①子類(lèi)自身的所有屬性都是成員屬性，父類(lèi)繼承過(guò)來(lái)的屬性都是原型屬性。

②依然無(wú)法通過(guò)一步實(shí)例化拿到完成的子類(lèi)對(duì)象。

第三種實(shí)現(xiàn)繼承的方法：

call()和apply()還有bind()，這三種方法很相似，只有在傳參方面有所不同。

function Person(name,age){
  this.name=name;
  this.age=age;
  this.say=function(){
    alert("我叫"+this.name);
    }
}
function Student(no,name,age){
  this.no=no;
  this.study=function(){
    alert("我在學(xué)習(xí)！");
  }
//將父類(lèi)函數(shù)的this,指向?yàn)樽宇?lèi)函數(shù)的this
Person.call(this,name,age);
}
var s=new Student(12,"張三",24);
console.log(s);

三個(gè)函數(shù)的唯一區(qū)別，在于接受func的參數(shù)列表的方式不同，除此之外，功能上沒(méi)有任何差異！

三個(gè)函數(shù)的寫(xiě)法(區(qū)別)：

call寫(xiě)法：func.call(func的this指向的obj,func參數(shù)1,func參數(shù)2,...);

apply寫(xiě)法：func.apply(func的this指向的obj,[func參數(shù)1,func參數(shù)2,...]);

bind寫(xiě)法：func.bind(func的this指向的obj)(func參數(shù)1,func參數(shù)2,...);

總結(jié)

以上所述是小編給大家介紹的JavaScript模擬實(shí)現(xiàn)封裝的三種方式，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: