收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JavaScript技巧 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

JavaScript模擬實現封裝的三種方式及寫法區別

前 言

  繼承是使用一個子類繼承另一個父類,那么子類可以自動擁有父類中的所有屬性和方法,這個過程叫做繼承! JS中有很多實現繼承的方法,今天我給大家介紹其中的三種吧。

1.在 Object類上增加一個擴展方法

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

上述實現繼承的原理:

通過循壞,將父類對象的所有屬性和方法,全部賦給子類對象。關鍵點在于for-in循壞,即使不擴展Object,也能通過簡單的循壞實現操作。

但是用這種方法實現繼承也有一些缺點:

①無法通過一次實例化,直接拿到完整的子類對象。而需要先拿到父類對象和子類對象兩個對象,再手動合并;

②擴展Object的繼承方法,也會保留在子類的對象上。

再來看看第二種實現繼承的方法吧~

2.使用原型繼承

在介紹這種方法之前先來說兩個概念:原型對象與原型

1、prototype:函數的原型對象

①只有函數才有prototype,而且所有函數必有prototype

②prototype本身也是一個對象!

③prototype指向了當前函數所在的引用地址!

2、__proto__:對象的原型!

①只有對象才有__proto__,而且所有對象必有__proto__

②__proto__也是一個對象,所以也有自己的__proto__,順著這條線向上照的順序,就是原型鏈。

③函數、數組都是對象,都有自己的__proto__

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

使用原型繼承的原理:

將父類對象,賦值給子類的prototype,那么父類對象的屬性和方法就會出現在子類的prototype中。那么,實例化子類時,子類的prototype又會到子類對象的__proto__中,最終,父類對象的屬性和方法,會出現在子類對象的__proto__中。

這種繼承的特點:

①子類自身的所有屬性都是成員屬性,父類繼承過來的屬性都是原型屬性。

②依然無法通過一步實例化拿到完成的子類對象。

第三種實現繼承的方法:

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("我在學習!");
  }
//將父類函數的this,指向為子類函數的this
Person.call(this,name,age);
}
var s=new Student(12,"張三",24);
console.log(s);

三個函數的唯一區別,在于接受func的參數列表的方式不同,除此之外,功能上沒有任何差異!

三個函數的寫法(區別):

call寫法:func.call(func的this指向的obj,func參數1,func參數2,...);

apply寫法:func.apply(func的this指向的obj,[func參數1,func參數2,...]);

bind寫法:func.bind(func的this指向的obj)(func參數1,func參數2,...);

總結

以上所述是小編給大家介紹的JavaScript模擬實現封裝的三種方式,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對積木網網站的支持!

Popup彈出框添加數據實現方法
本文實例為大家分享了Popup彈出框添加數據的具體代碼,供大家參考,具體內容如下邏輯窗口P1中顯示一組數據,并提供一個添加按鈕點擊按鈕,彈出新

JavaScript自執行函數和jQuery擴展方法詳解
我們通常將JS代碼寫在一個單獨的JS文件中,然后在頁面中引入該文件。但是,有時候引入后會碰到變量名或函數名與其它JS代碼沖突的問題。那么如何

JavaScript中Require調用js的實例分享
在我最初開始寫JavaScript函數時,通常是這樣的:functionfun1(){//somecodehere}functionfun2(){//someothercodehere}...函數全寫在全局環境中,項目很小時,通常不會有

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
时时彩免费分析软件