第六章(2):創(chuàng)建對(duì)象

創(chuàng)建對(duì)象的幾種模式

  • 工廠模式
/**
 * 工廠模式
 * 缺點(diǎn):對(duì)象無(wú)法識(shí)別
 * @param name
 * @param age
 * @param msg
 */
function createPerson(name, age, msg) {
  var o = Object.create({});
  o.name = name;
  o.age = age;
  o.say = function () {
    console.log(msg);
  }

  return o;
}
var p1 = createPerson('小和尚', 18, '皈依佛,皈依法,皈依僧');
var p2 = createPerson('動(dòng)情的小和尚', 18, '皈依佛,皈依法,皈依僧,皈依秀');
console.log(p1, p2) // Object {name: "小和尚", age: 18, say: function} Object {name: "動(dòng)情的小和尚", age: 18, say: function}
  • 構(gòu)造函數(shù)模式
/**
 * 構(gòu)造器模式(函數(shù)的第一個(gè)名字大寫,借鑒其他OO語(yǔ)言,為了與其他普通函數(shù)做區(qū)分,創(chuàng)建對(duì)象的時(shí)候通過(guò)new來(lái)創(chuàng)建)
 * 創(chuàng)建對(duì)象的4個(gè)步驟:
 * (1)創(chuàng)建一個(gè)新對(duì)象
 * (2)將構(gòu)造函數(shù)的作用域賦給新對(duì)象
 * (3)執(zhí)行構(gòu)造函數(shù)中的代碼(為這個(gè)新對(duì)象添加屬性和方法)
 * (4)返回新對(duì)象
 * 缺點(diǎn):每個(gè)方法都需要重新創(chuàng)建。
 * 優(yōu)點(diǎn):解決了工廠模式無(wú)法識(shí)別對(duì)象的問(wèn)題
 * @param name
 * @param age
 * @param msg
 * @constructor
 */
function Person(name, age, msg) {
  this.name = name;
  this.age = age;
  this.say = function () {
    console.log(msg)
  }
}
var c1 = new Person('小和尚', 18, '皈依佛,皈依法,皈依僧');
var c2 = new Person('動(dòng)情的小和尚', 18, '皈依佛,皈依法,皈依僧,皈依秀');
console.log(c1 instanceof Person) // true
console.log(c2 instanceof Person) // true
console.log(c1.say === c2.say)  // false
  • 原型模式

我們創(chuàng)建的每一個(gè)函數(shù),都有一個(gè)prototype屬性。這個(gè)屬性是一個(gè)指針,指向一個(gè)對(duì)象。這個(gè)對(duì)象為通過(guò)調(diào)用此構(gòu)造函數(shù)創(chuàng)建的對(duì)象服務(wù),這個(gè)對(duì)象就是原型對(duì)象。

  • 通過(guò)原型模式創(chuàng)建的對(duì)象之間的關(guān)系。

  • 讀取某個(gè)對(duì)象的屬性的執(zhí)行過(guò)程。
    先從對(duì)象實(shí)例本身開(kāi)始搜索,如果找到則返回。否則繼續(xù)搜索該對(duì)象的原型對(duì)象,找到則返回。

  • 通過(guò)delete方法可以刪除實(shí)例的屬性。

  • 實(shí)例

/**
 * 原型模式
 * 缺點(diǎn):實(shí)例的屬性和方法是共享的
 * @param name
 * @param age
 * @constructor
 */
function Student() {}
Student.prototype.name = '小明';
Student.prototype.age = '18';
Student.prototype.say = function () {
  console.log(this.name)
}
var s1 = new Student();
var s2 = new Student();
console.log(s1.name, s2.name) // 小明 小明
console.log(s1.say === s2.say)  // true
// 為實(shí)例創(chuàng)建的屬性名如果和原型中的屬性名相同,則會(huì)會(huì)覆蓋原型中的屬性。
s1.name = '小白';
console.log(s1) //Student {name: "小白"}
console.log(s1.name, s2.name) // 小白 小明
delete s1.name;
console.log('delete: ', s1.name, s2.name) // delete:  小明 小明
// getPrototypeOf方法返回對(duì)象的[prototype]的值
console.log(Object.getPrototypeOf(s1))  // Object {name: "小明", age: "18", say: function, constructor: function}
console.log(Object.getPrototypeOf(s1) === Student.prototype)  // true
// hasOwnProperty方法可以判斷屬性是否是實(shí)例中的屬性
console.log(s1.hasOwnProperty('name'))  // true
console.log(s2.hasOwnProperty('name'))  // false
//返回可枚舉的屬性
console.log(Object.keys(s1))  // ["name"]
console.log(Object.keys(Student.prototype)) // ["name", "age", "say"]
  • 構(gòu)造函數(shù)和原型模式的組合
/**
 * 構(gòu)造函數(shù)模式和原型模式的組合(構(gòu)造函數(shù)中定義屬性,原型模式中定義方法和公用的屬性,工作中常用的模式)
 * @param name
 * @param author
 * @constructor
 */
function Book(name, author, msg) {
  this.name = name;
  this.author = author;
  this.msg = msg;
}
Book.prototype = {
  say: function () {
    console.log(this.msg)
  }
}
var b1 = new Book('悟空傳', '今何在', '生我何用?不能歡笑。滅我何用?不減狂驕。')
var b2 = new Book('劍來(lái)', '烽火戲諸侯', '走在泥瓶巷里的少年,好像想起了誰(shuí),一下子就淚流滿面了。')
console.log(b1.say(), b2.say()) // 生我何用?不能歡笑。滅我何用?不減狂驕。 走在泥瓶巷里的少年,好像想起了誰(shuí),一下子就淚流滿面了。
console.log(b1.say === b2.say)  // true(公用原型中的方法)

引用

javascript 高級(jí)程序設(shè)計(jì)第三版

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容