詳解JS面向?qū)ο缶幊?/h1>

 更新時間：2016年01月24日 10:25:30   投稿：lijiao  

這篇文章主要為大家介紹了js面向?qū)ο缶幊?，感興趣的小伙伴們可以參考一下

因為JavaScript是基于原型（prototype）的，沒有類的概念（ES6有了，這個暫且不談），我們能接觸到的都是對象，真正做到了一切皆為對象

所以我們再說對象就有些模糊了，很多同學(xué)會搞混類型的對象和對象本身這個概念，我們在接下來的術(shù)語中不提對象，我們使用和Java類似的方式，方便理解

方式一

類(函數(shù)模擬)

function Person(name,id){
 //實例變量可以被繼承
 this.name = name;
 //私有變量無法被繼承
 var id = id;
 //私有函數(shù)無法被繼承
 function speak(){
  alert("person1");
 }
}
//靜態(tài)變量,無法被繼承
Person.age = 18;
//公有函數(shù)可以被繼承
Person.prototype.say = function(){
 alert("person2");
}

繼承,并調(diào)用父類方法

function Person(name,id){
 //實例變量可以被繼承
 this.name = name;
 //私有變量無法被繼承
 var id = id;
 //私有函數(shù)無法被繼承
 function speak(){
  alert("person1");
 }
}
//靜態(tài)變量,無法被繼承
Person.age = 18;
//公有靜態(tài)成員可被繼承
Person.prototype.sex = "男";
//公有靜態(tài)函數(shù)可以被繼承
Person.prototype.say = function(){
 alert("person2");
}
//創(chuàng)建子類
function Student(){
}
//繼承person
Student.prototype = new Person("iwen",1);
//修改因繼承導(dǎo)致的constructor變化
Student.prototype.constructor = Student;
var s = new Student();
alert(s.name);//iwen
alert(s instanceof Person);//true
s.say();//person2

繼承,復(fù)寫父類方法且實現(xiàn)super()

function Person(name,id){
 //實例變量可以被繼承
 this.name = name;
 //私有變量無法被繼承
 var id = id;
 //私有函數(shù)無法被繼承
 function speak(){
  alert("person1");
 }
}
//靜態(tài)變量,無法被繼承
Person.age = 18;
//公有靜態(tài)成員可被繼承
Person.prototype.sex = "男";
//公有靜態(tài)函數(shù)可以被繼承
Person.prototype.say = function(){
 alert("person2");
}
//創(chuàng)建子類
function Student(){
}
//繼承person
Student.prototype = new Person("iwen",1);
//修改因繼承導(dǎo)致的constructor變化
Student.prototype.constructor = Student;
//保存父類的引用
var superPerson = Student.prototype.say;
//復(fù)寫父類的方法
Student.prototype.say = function(){
 //調(diào)用父類的方法
 superPerson.call(this);
 alert("Student");
}
//創(chuàng)建實例測試
var s = new Student();
alert(s instanceof Person);//true
s.say();//person2 student

繼承的封裝函數(shù)

function extend(Child, Parent) {

　　　　var F = function(){};
　　　　F.prototype = Parent.prototype;
　　　　Child.prototype = new F();
　　　　Child.prototype.constructor = Child;
　　　　Child.uber = Parent.prototype;
　　}

uber意思是為子對象設(shè)一個uber屬性，這個屬性直接指向父對象的prototype屬性。（uber是一個德語詞，意思是”向上”、”上一層”。）這等于在子對象上打開一條通道，可以直接調(diào)用父對象的方法。這一行放在這里，只是為了實現(xiàn)繼承的完備性，純屬備用性質(zhì)。

方式二

相當(dāng)于拷貝,通過定義的_this對象來承載想要被繼承的對象,這樣的話通過傳遞_this就可以實現(xiàn)繼承,比上面那種好理解些

//創(chuàng)建父類
function Person(name,id){
 //創(chuàng)建一個對象來承載父類所有公有東西
 //也就是說_this承載的對象才會被傳遞給子類
 var _this = {};
 _this.name = name;
 //這樣的是不會傳遞下去的
 this.id = id;
 //承載方法
 _this.say = function(){
  alert("Person");
 }
 //返回_this對象
 return _this;
}
//子類
function Student(){
 //獲取person的_this對象,從而模仿繼承
 var _this = Person("iwne",1);
 //保存父類的_this引用
 var superPerson = _this.say;
 //復(fù)寫父類的方法
 _this.say = function(){
  //執(zhí)行父類的say
  superPerson.call(_this);
  alert("Student");
 }
 return _this;
}
var s = new Student();
s.say();

希望對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。

您可能感興趣的文章:

• JavaScript求一組數(shù)的最小公倍數(shù)和最大公約數(shù)常用算法詳解【面向?qū)ο?，回歸迭代和循環(huán)】
• javascript 面向?qū)ο骹unction詳解及實例代碼
• JS 面向?qū)ο笾^承---多種組合繼承詳解
• JS面向?qū)ο缶幊淘斀?/a>
• 詳解JavaScript基于面向?qū)ο笾^承實例
• 詳解JavaScript基于面向?qū)ο笾^承
• 詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對象（2）
• 詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對象（1）
• js面向?qū)ο笾?、私有、靜態(tài)屬性和方法詳解
• JS Pro-深入面向?qū)ο蟮某绦蛟O(shè)計之繼承的詳解
• JAVASCRIPT THIS詳解 面向?qū)ο?/a>
• JS面向?qū)ο蟮某绦蛟O(shè)計相關(guān)知識小結(jié)
• JavaScript面向?qū)ο蟮某绦蛟O(shè)計(犯迷糊的小羊)

• JS
• 面向?qū)ο?/a>

相關(guān)文章

• 

  JavaScript 事件冒泡應(yīng)用實例分析

  在一些傳統(tǒng)的小型WEB應(yīng)用開發(fā)過程中，JavaScript通常只是拿來做表單驗證而以，所以你很少會遇到因為JavaScript事件冒泡而影響功能的實現(xiàn)情況，又或者事件冒泡對最終實現(xiàn)效果影響不大，可忽略。

  2010-01-01
• 

  JavaScript使用Broadcast?Channel實現(xiàn)前端跨標(biāo)簽頁通信

  這篇文章主要為大家詳細介紹了JavaScript如何使用Broadcast?Channel實現(xiàn)前端跨標(biāo)簽頁通信,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

  2024-04-04
• 

  javascript函數(shù)特點實例分析

  這篇文章主要介紹了javascript函數(shù)特點,實例分析了javascript函數(shù)傳遞參數(shù)及調(diào)用方法,需要的朋友可以參考下

  2015-05-05
• 

  使用Threejs加載外部glb文件

  這篇文章主要介紹了使用Threejs加載外部glb文件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

  2024-04-04
• 

  基于JavaScript實現(xiàn)實時在線協(xié)作編輯器

  隨著Web技術(shù)的發(fā)展,實現(xiàn)在線協(xié)作編輯文檔已經(jīng)成為一種常見的需求,本文主要為大家詳細介紹了如何使用JavaScript實現(xiàn)實時在線協(xié)作編輯器,需要的可以參考下

  2024-01-01
• 

  微信小程序?qū)崿F(xiàn)手寫簽名功能

  微信小程序?qū)崿F(xiàn)手寫簽名功能的步驟詳解,包括技術(shù)選型、實現(xiàn)步驟、優(yōu)化與拓展以及常見問題解答,感興趣的朋友跟隨小編一起看看吧

  2025-01-01
• 

  JavaScript創(chuàng)建對象的四種常用模式實例分析

  這篇文章主要介紹了JavaScript創(chuàng)建對象的四種常用模式,結(jié)合實例形式分析了javascript使用工廠模式、構(gòu)造函數(shù)模式、原型模式及動態(tài)原型模式創(chuàng)建對象的相關(guān)操作技巧與注意事項,需要的朋友可以參考下

  2019-01-01
• 

  能說明你的Javascript技術(shù)很爛的五個原因分析

  Javascript在互聯(lián)網(wǎng)上名聲很臭，但你又很難再找到一個像它這樣如此動態(tài)、如此被廣泛使用、如此根植于我們的生活中的另外一種語言

  2011-10-10
• 

  關(guān)于ES6字符串的擴展詳解

  es6這個String對象倒是擴展了不少方法,但是很多都是跟字符編碼相關(guān),下面這篇文章主要給大家介紹了關(guān)于ES6字符串?dāng)U展的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

  2022-08-08
• 

  js this函數(shù)調(diào)用無需再次抓獲id，name或標(biāo)簽名

  this就是你當(dāng)前要執(zhí)行的js所抓獲的節(jié)點，這樣在js里就可以不用document.getElement之類的寫法來抓獲id，name或標(biāo)簽名，具體示例如下

  2014-03-03

最新評論