學習javascript面向對象 掌握創(chuàng)建對象的9種方式
本文為大家分享了javascript創(chuàng)建對象的9種方式,供大家參考,具體內容如下
【1】使用Object構造函數(shù)
[缺點]使用同一個接口創(chuàng)建很多對象,會產(chǎn)生大量重復代碼
var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.job = "Software Engineer";
person.sayName = function(){
alert(this.name);
}
【2】使用對象字面量
[缺點]使用同一個接口創(chuàng)建很多對象,會產(chǎn)生大量重復代碼
var person = {
name: "Nicholas",
age : 29,
job: "Software Engineer",
sayName: function(){
alert(this.name);
}
};
【3】工廠模式:抽象了創(chuàng)建具體對象的過程,考慮到ECMAScript中無法創(chuàng)建類,開發(fā)人員就發(fā)明了一種函數(shù),用函數(shù)來封裝以特定接口創(chuàng)建對象的細節(jié)
[缺點]解決了創(chuàng)建多個相似對象的問題,但沒有解決對象識別的問題
function createPerson(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayname = function(){
alert(this.name);
}
return o;
}
var person1 = createPerson('Nicholas',29,'software Engineer');
var person2 = createPerson('greg',27,'doctor');
【4】構造函數(shù)模式:沒有顯式地創(chuàng)建對象,直接將屬性和方法賦給了this對象,沒有return語句
[缺點]每個方法都要在每個實例上重新創(chuàng)建一遍
function Person(name,age,job){
this.name = name;
this.age = age;
this.jog = job;
this.sayName = function(){
alert(this.name);
};
//與聲明函數(shù)在邏輯上是等價的
//this.sayName = new Function('alert(this.name)');
}
var person1 = new Person("Nicholas",29,"software Engineer");
var person2 = new Person("Greg",27,"doctor");
【4.1】構造函數(shù)拓展模式:把函數(shù)定義轉移到構造函數(shù)外部
[缺點1]在全局作用域中定義的函數(shù)實際上只能被某個對象調用,這讓全局作用域有點名不副實
[缺點2]若對象需要定義很多方法,就要定義很多全局函數(shù),這個自定義引用類型就沒有封裝性可言
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}
function sayName(){
alert(this.name);
}
var person = new Person('小火柴','20','student')
person.sayName();
console.log(Person);
【5】原型模式:我們創(chuàng)建的每個函數(shù)都有一個prototype(原型)屬性,這個屬性是一個指針,指向一個對象,而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。如果按照字面意思來理解,prototype就是通過調用構造函數(shù)而創(chuàng)建的對象實例的原型對象
function Person(){
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
}
}
var person1 = new Person();
person1.sayName();//"Nicholas"
var person2 = new Person();
person2.sayName();//"Nicholas"
alert(person1.sayName == person2.sayName);//true
【5.1】更簡單的原型模式:為了減少不必要的輸入,也為了從視覺上更好地封裝原型的功能,用一個包含所有屬性和方法的對象字面量來重寫整個原型對象。
[缺點]以這種方式重設constructor屬性會導致它的[[Enumerable]]特性被設置為true,默認情況下原生的constructor屬性是不可枚舉的
function Person(){};
Person.prototype = {
constructor : Person,
name: "Nicholas",
age: 29,
job: "software Engineer",
sayName : function(){
alert(this.name);
}
};
【5.2】解決enumerable問題的原型模式
function Person(){};
Person.prototype = {
name: "Nicholas",
age: 29,
job: "software Engineer",
sayName : function(){
alert(this.name);
}
};
Object.defineProperty(Person.prototype,"constructor",{
enumerable : false,
value : Person
});
[原型模式缺點1]重寫原型對象切斷了現(xiàn)有原型與已存在對象實例之間的聯(lián)系,它們引用的仍是最初的原型。
function Person(){}
var friend = new Person();
Person.prototype = {
constructor: Person,
name: "Nicholas",
age: 29,
job: "Software Engineer",
sayName: function(){
alert(this.name);
}
};
friend.sayName();//error
[原型模式缺點2]引用類型屬性的共享性問題突出
function Person(){}
Person.prototype = {
constructor: Person,
name: "Nicholas",
age: 29,
job: "Software Engineer",
friend : ["shelby","Court"],
sayName: function(){
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends);//["shelby","Court","Van"];
alert(person2.friends);//["shelby","Court","Van"];
alert(person1.friends === person2.friends);//true
【6】組合模式:組合使用構造函數(shù)模式和原型模式是創(chuàng)建自定義類型的最常見方式。構造函數(shù)模式用于定義實例屬性,而原型模式用于定義方法和共享的屬性。這種混成模式還支持向構造函數(shù)傳遞參數(shù),是用來定義引用類型的一種默認模式
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["shelby","Court"];
}
Person.prototype = {
constructor: Person,
sayName : function(){
alert(this.name);
}
}
var person1 = new Person("Nicholas",29,"Software Engineer");
var person2 = new Person("Greg",27,"Doctor");
person1.friends.push("Van");
alert(person1.friends);// ["shelby","Court","Van"];
alert(person1.friends);// ["shelby","Court"];
alert(person1.friends === person2.friends);//false
alert(person1.sayName === person2.sayName);//true
【7】動態(tài)原型模式:把所有信息都封裝在構造函數(shù)中,通過在構造函數(shù)中初始化原型(僅在必要情況下),又保持了同時使用構造函數(shù)和原型的優(yōu)點。換句話說,可以通過檢查某個存在的方法是否有效,來決定是否要初始化原型。
[注意]使用動態(tài)原型模式時,不能使用對象字面量重寫原型。如果在已經(jīng)創(chuàng)建了實例的情況下重寫原型,那么就會切斷現(xiàn)有實例與新實例之間的聯(lián)系
function Person(name,age,job){
//屬性
this.name = name;
this.age = age;
this.job = job;
//方法
if(typeof this.sayName != "function"){
Person.prototype.sayName = function(){
alert(this.name);
};
}
}
var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();
【8】寄生構造函數(shù)模式:創(chuàng)建一個函數(shù),該函數(shù)的作用僅僅是封裝創(chuàng)建對象的代碼,然后再返回新創(chuàng)建的對象
function Person(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();//"Nicholas"
【寄生構造函數(shù)模式應用】創(chuàng)建一個具有額外方法的特殊數(shù)組。由于不能直接修改Array構造函數(shù),因此可以使用這個模式
function SpecialArray(){
//創(chuàng)建數(shù)組
var values = new Array();
//添加值
values.push.apply(values,arguments);
//添加方法
values.toPipedString = function(){
return this.join('|');
};
//返回數(shù)組
return values;
}
var colors = new SpecialArray("red","blue","green");
alert(colors.toPipedString());//"red|blue|green"
【9】穩(wěn)妥構造函數(shù)模式:所謂穩(wěn)妥對象指沒有公共屬性,而且其方法也不引用this的對象。穩(wěn)妥對象最適合在一些安全環(huán)境中(這些環(huán)境會禁止使用this和new)或者在防止數(shù)據(jù)被其他應用程序改動時使用。
function Person(name,age,job){
//創(chuàng)建要返回的對象
var o = new Object();
//可以在這里定義私有變量和函數(shù)
//添加方法
o.sayName = function(){
alert(name);
};
//返回對象
return o;
}
//在穩(wěn)妥模式創(chuàng)建的對象中,除了使用sayName()方法之外,沒有其他方法訪問name的值
var friend = Person("Nicholas",29,"Software Engineer");
friend.sayName();//"Nicholas"
以上就是javascript創(chuàng)建對象的九種方式,希望對大家的學習有所幫助。
- js面向對象之常見創(chuàng)建對象的幾種方式(工廠模式、構造函數(shù)模式、原型模式)
- 從面試題學習Javascript 面向對象(創(chuàng)建對象)
- js面向對象 多種創(chuàng)建對象方法小結
- 詳解JavaScript基于面向對象之創(chuàng)建對象(1)
- 詳解JavaScript基于面向對象之創(chuàng)建對象(2)
- JavaScript面向對象程序設計創(chuàng)建對象的方法分析
- JavaScript 三種創(chuàng)建對象的方法
- JS 創(chuàng)建對象(常見的幾種方法)
- js創(chuàng)建對象的幾種常用方式小結(推薦)
- javascript面向對象創(chuàng)建對象的方式小結
相關文章
uni-app實現(xiàn)web-view圖片長按下載解決方案
uniapp的web-view中圖片無法長按保存,IOS下是正常的,但是Android下長按無反應,這篇文章主要介紹了uni-app實現(xiàn)web-view圖片長按下載解決方案,需要的朋友可以參考下2023-09-09
小程序按鈕避免多次調用接口和點擊方案實現(xiàn)(不用showLoading)
這篇文章主要介紹了小程序按鈕避免多次調用接口和點擊方案實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
JS中判斷字符串中出現(xiàn)次數(shù)最多的字符及出現(xiàn)的次數(shù)的簡單實例
下面小編就為大家?guī)硪黄狫S中判斷字符串中出現(xiàn)次數(shù)最多的字符及出現(xiàn)的次數(shù)的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
IE6 彈出Iframe層中的文本框“經(jīng)?!睙o法獲得輸入焦點
IE6間歇性精神障礙 彈出Iframe層中的文本框“經(jīng)?!睙o法獲得輸入焦點的解決方法。2009-12-12

