JavaScript 創(chuàng)建對(duì)象的多種方式以及優(yōu)缺點(diǎn)
1.工廠模式
function createPerson(name) {
var o = new Object();
o.name = name;
o.getName = function() {
console.log(this.name)
};
return o;
}
var person1 = createPerson('cause');
缺點(diǎn)：對(duì)象無法識(shí)別羽氮，因?yàn)樗械膶?shí)例都指向一個(gè)原型
2.構(gòu)造函數(shù)模式
function Person(name) {
this.name = name;
this.getName = function() {
console.log(this.name);
}
}
var person = new Person('cause');
優(yōu)點(diǎn)：實(shí)例可以識(shí)別為一個(gè)特定的類型
缺點(diǎn)：每次創(chuàng)建實(shí)例時(shí)惫恼，每個(gè)方法都要被創(chuàng)建一次
2.1 構(gòu)造函數(shù)模式優(yōu)化
function Person(name) {
this.name = name;
this.getName = getName;
}
}
function getName() {
console.log(this.name);
}
var person = new Person('cause');
優(yōu)點(diǎn)：解決了每個(gè)方法都要被重新創(chuàng)建的問題
缺點(diǎn)：這叫啥封裝……
3.1 原型模式
function Person(name) {
}
Person.prototype = {
name: 'cause',
getName: function () {
console.log(this.name);
}
};
var person1 = new Person();
優(yōu)點(diǎn)：封裝性好了一點(diǎn)
缺點(diǎn)：重寫了原型，丟失了constructor屬性
3.2 原型模式優(yōu)化
function Person(name) {
}
Person.prototype = {
constructor: Person,
name: "cause",
getName: function() {
console.log(this.name);
}
};
var person1 = new Person();
優(yōu)點(diǎn)：實(shí)例可以通過constructor屬性找到所屬構(gòu)造函數(shù)
缺點(diǎn)：原型模式該有的缺點(diǎn)還是有
4. 組合模式
構(gòu)造函數(shù)模式與原型模式雙劍合璧令宿。
function Person(name) {
this.name = name;
}
Person.prototype = {
constructor: Person,
getName: function() {
console.log(this.name);
}
};
var person1 = new Person();
優(yōu)點(diǎn)：該共享的共享粒没，該私有的私有，使用最廣泛的方式
缺點(diǎn)：有的人就是希望全部都寫在一起癞松，即更好的封裝性
繼承的多種方式和優(yōu)缺點(diǎn)
1.原型鏈繼承
function Parent() {
this.name = "cause";
}
Parent.prototype.getName = function() {
console.log(this.name);
}
function Child() {
}
Child.prototype = new Parent();
var child1 = new Child();
console.log(child1.getName()); // cause
問題：
1.引用類型的屬性被所有實(shí)例共享，舉個(gè)例子：
function Parent() {
this.names = ['cause', 'xl'];
}
function Child() {
}
Child.prototype = new Parent();
var child1 = new Child();
console.log(child1.names); // ["kevin", "daisy", "yayu"]
var child2 = new Child();
console.log(child2.names); // ["kevin", "daisy", "yayu"]
2.在創(chuàng)建 Child 的實(shí)例時(shí)硕勿，不能向Parent傳參
2.借用構(gòu)造函數(shù)(經(jīng)典繼承)
function Parent() {
this.names = ['cause', 'xl'];
}
function Child() {
Parent.call(this);
}
var child1 = new Child();
child1.names.push('cayden');
console.log(child1.names); // ["kevin", "daisy", "yayu"]
var child2 = new Child();
console.log(child2.names); // ["kevin", "daisy"]
優(yōu)點(diǎn)：
1.避免了引用類型的屬性被所有實(shí)例共享
2.可以在 Child 中向 Parent 傳參
舉個(gè)例子：
function Parent (name) {
this.name = name;
}
function Child (name) {
Parent.call(this, name);
}
var child1 = new Child('kevin');
console.log(child1.name); // kevin
var child2 = new Child('daisy');
console.log(child2.name); // daisy
缺點(diǎn)：
方法都在構(gòu)造函數(shù)中定義源武，每次創(chuàng)建實(shí)例都會(huì)創(chuàng)建一遍方法言秸。
3.組合繼承
原型鏈繼承和經(jīng)典繼承雙劍合璧。
function Parent (name) {
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.getName = function () {
console.log(this.name)
}
function Child (name, age) {
Parent.call(this, name);
this.age = age;
}
Child.prototype = new Parent();
var child1 = new Child('kevin', '18');
child1.colors.push('black');
console.log(child1.name); // kevin
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "black"]
var child2 = new Child('daisy', '20');
console.log(child2.name); // daisy
console.log(child2.age); // 20
console.log(child2.colors); // ["red", "blue", "green"]
優(yōu)點(diǎn)：融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點(diǎn)查排，是 JavaScript 中最常用的繼承模式。
精益求精
function Parent (name) {
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.getName = function () {
console.log(this.name)
}
function Child (name, age) {
Parent.call(this, name);
this.age = age;
}
// 關(guān)鍵的三步
var F = function () {};
F.prototype = Parent.prototype;
Child.prototype = new F();
var child1 = new Child('kevin', '18');
最后我們封裝一下這個(gè)繼承方法：
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
function prototype(child, parent) {
var prototype = object(parent.prototype);
prototype.constructor = child;
child.prototype = prototype;
}
// 當(dāng)我們使用的時(shí)候：
prototype(Child, Parent);
