JavaScript 创建对象的多种方式以及优缺点
1.工厂模式
function createPerson(name) {
var o = new Object();
o.name = name;
o.getName = function() {
console.log(this.name)
};
return o;
}
var person1 = createPerson('cause');
缺点：对象无法识别，因为所有的实例都指向一个原型
2.构造函数模式
function Person(name) {
this.name = name;
this.getName = function() {
console.log(this.name);
}
}
var person = new Person('cause');
优点：实例可以识别为一个特定的类型
缺点：每次创建实例时，每个方法都要被创建一次
2.1 构造函数模式优化
function Person(name) {
this.name = name;
this.getName = getName;
}
}
function getName() {
console.log(this.name);
}
var person = new Person('cause');
优点：解决了每个方法都要被重新创建的问题
缺点：这叫啥封装……
3.1 原型模式
function Person(name) {
}
Person.prototype = {
name: 'cause',
getName: function () {
console.log(this.name);
}
};
var person1 = new Person();
优点：封装性好了一点
缺点：重写了原型，丢失了constructor属性
3.2 原型模式优化
function Person(name) {
}
Person.prototype = {
constructor: Person,
name: "cause",
getName: function() {
console.log(this.name);
}
};
var person1 = new Person();
优点：实例可以通过constructor属性找到所属构造函数
缺点：原型模式该有的缺点还是有
4. 组合模式
构造函数模式与原型模式双剑合璧。
function Person(name) {
this.name = name;
}
Person.prototype = {
constructor: Person,
getName: function() {
console.log(this.name);
}
};
var person1 = new Person();
优点：该共享的共享，该私有的私有，使用最广泛的方式
缺点：有的人就是希望全部都写在一起，即更好的封装性
继承的多种方式和优缺点
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.引用类型的属性被所有实例共享，举个例子：
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.在创建 Child 的实例时，不能向Parent传参
2.借用构造函数(经典继承)
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"]
优点：
1.避免了引用类型的属性被所有实例共享
2.可以在 Child 中向 Parent 传参
举个例子：
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
缺点：
方法都在构造函数中定义，每次创建实例都会创建一遍方法。
3.组合继承
原型链继承和经典继承双剑合璧。
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"]
优点：融合原型链继承和构造函数的优点，是 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;
}
// 关键的三步
var F = function () {};
F.prototype = Parent.prototype;
Child.prototype = new F();
var child1 = new Child('kevin', '18');
最后我们封装一下这个继承方法：
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;
}
// 当我们使用的时候：
prototype(Child, Parent);
网友评论