JavaScript類的寫法
我們知道，在js中，是沒有類的概念的。類的所有實例對象都從同一個原型對象上繼承屬性，因此，原型對象是類的核心。
類是對象的抽象，而對象是類的具體實例。類是抽象的，不占用內(nèi)存，而對象是具體的，占用存儲空間。———百度百科
早期的javascript需求都很簡單，基本都是寫成函數(shù)的，然后是面向過程的寫法，后來慢慢的引入面向?qū)ο箝_發(fā)思想，再后來就慢慢寫成類。
在js中，寫成類的本質(zhì)基本都是 構(gòu)造函數(shù)+原型。下面，就討論一下js類的幾種寫法：
構(gòu)造函數(shù)法
/**
* Person類：定義一個人，有name屬性和getName方法
*/
<script>
function Person(name){
this.name = name;
this.getName = function(){
return this.name;
}
}
//我們在這里實例化幾個對象
var p1 = new Person("trigkit4");
var p2 = new Person("mike");
console.log(p1 instanceof Person);//true
console.log(p2 instanceof Person);//true
</script>
由上面控制臺輸出結(jié)果可知，p1和p2的確是類Person的實例對象。instanceof操作符左邊是待檢測類的對象，右邊是定義類的構(gòu)造函數(shù)。這里，instanceof用來檢測對象p1是否屬于Person類。
這種方式的優(yōu)點是：我們可以根據(jù)參數(shù)來構(gòu)造不同的對象實例 ，缺點是每次構(gòu)造實例對象時都會生成getName方法，造成了內(nèi)存的浪費 。
我們可以用一個外部函數(shù)來代替類方法，達到了每個對象共享同一個方法。改寫后的類如下：
//外部函數(shù)
<script>
function getName() {
return this.name;
}
function Person(name){
this.name = name;
this.getName = getName;//
}
</script>
原型方式
<script>
function Person(){};
Person.prototype.name = "trigkit4";//類的屬性都放在prototype上
Person.prototype.getName = function(){
return " I'm " + this.name;
}
var p1 = new Person();
var p2 = new Person();
console.log(p1.name);//trigkit4
console.log(p2.getName());//I'm trigkit4
</script>
原型方式的缺點就是不能通過參數(shù)來構(gòu)造對象實例 (一般每個對象的屬性是不相同的) ，優(yōu)點是所有對象實例都共享getName方法（相對于構(gòu)造函數(shù)方式），沒有造成內(nèi)存浪費 。
構(gòu)造函數(shù)+原型方式
取前面兩種的優(yōu)點：
a、用構(gòu)造函數(shù)來定義類屬性（字段）。
b、用原型方式來定義類的方法。
<script>
function Person(name){
this.name = name;
}
//原型的特性可以讓對象實例共享getName方法
Person.prototype.getName = function(){
return " I'm " + this.name;
}
</script>
這樣，我們就既可以構(gòu)造不同屬性的對象，也可以讓對象實例共享方法，不會造成內(nèi)存的浪費。
為了讓js代碼風(fēng)格更緊湊，我們讓prototype方法代碼移到function Person的大括號內(nèi)。
<script>
function Person(name){
this.name = name;
Person.prototype.getName = function(){
return name;//不宜用this.name
}
}
var p1 = new Person('trigkit4');
console.log(p1.getName());//trigkit4
</script>
在這里，我們需要知道的幾種定義類的方法，除了上面的構(gòu)造函數(shù)外，還有：
Object.create()方法
用這個方法，"類"就是一個對象，而不是函數(shù)。
var Person = {
name : "trigkit4",
age : 21,
run: function(){
alert("I like running");
}
}
然后，直接用Object.create()生成實例，不需要用到new。
var p1 = Object.create(Person); alert(p1.age);//21 p1.run();//I like running
這種方法比"構(gòu)造函數(shù)法"簡單，但是不能實現(xiàn)私有屬性和私有方法，實例對象之間也不能共享數(shù)據(jù)，對"類"的模擬不夠全面。
createNew()方法
這種方法不需要用到this和prototype，其做法是用對象來模擬一個類，然后在類里面定義一個構(gòu)造函數(shù)createNew()，然后在createNew()里面定義實例對象，把這個實例對象作為返回值。
<script>
var Person = {
createNew : function () {
var person = {};
person.name = "trigkit4";
person.run = function(){
alert("I like running");
};
return person;
}
}
</script>
使用的時候，調(diào)用createNew()方法，就可以得到實例對象。
var p1 = Person.createNew(); p1.run();//I like running
這種寫法其實和對象字面量的寫法是很類似的，只不過一個是逗號分隔，一個是分號分隔。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
實現(xiàn)select跳轉(zhuǎn)的方法有很多，本例為大家介紹的是js實現(xiàn)的，通過location.href獲取跳轉(zhuǎn)地址，需要的朋友可以看看2014-10-10
微信小程序?qū)崿F(xiàn)swiper切換卡內(nèi)嵌滾動條不顯示的方法示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)swiper切換卡內(nèi)嵌滾動條不顯示的方法,涉及微信小程序swiper選項卡組件相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細介紹了JavaScript仿京東輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要為大家詳細介紹了JS及PHP代碼編寫八大排序算法的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要為大家詳細介紹了js實現(xiàn)PC端和移動端刮卡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
Js setInterval與setTimeout(定時執(zhí)行與循環(huán)執(zhí)行)的代碼(可以傳入?yún)?shù))
最近在做項目時用到了定時執(zhí)行的js方法，setInterval與setTimeout時間長了不用有些生疏了，所以自己總結(jié)了一下，記下來，以便以后使用。2010-06-06
Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于uniapp中vuex的應(yīng)用使用,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單音樂播放器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
JavaScript 是一款強大的廣泛運用于現(xiàn)代Web站點及應(yīng)用的腳本語言。作為一個技藝精湛的 Web 開發(fā)者，掌握JavaScript可以增強用戶的使用體驗，提供交互及富客戶端等功能。2010-04-04
這篇文章主要為大家詳細介紹了javaScript實現(xiàn)世界各地時間顯示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09