JS对象的创建方式
程序员文章站
2022-04-15 23:09:28
一、字面量方式 问题:创建多个对象时会造成 代码冗余 ,很占内存空间。 二、工厂模式 问题:虽然解决了对象字面量创造对象冗余的问题,但是 存在对象识别的问题 ,不能反映它们之间的内在关系。 三、构造函数模式 问题:解决了工厂模式的问题,但是 相同方法重复创建 就浪费了内存空间。 四、原型模式 问题: ......
一、字面量方式
var obj = { name: 'mm', age: 18, sayname: function() { console.log(this.name); } }
问题:创建多个对象时会造成代码冗余,很占内存空间。
二、工厂模式
//function createtoy(name) { // var o = new object(); // o.name = name; // o.say = function() { // console.log(this.name); // } // return o; //} function createtoy(name) { return { name: name, say: function() { console.log(this.name); } } } var toy1 = createtoy('car'); toy1.say(); var toy2 = createtoy('taxi'); toy2.say(); var toy3 = createtoy('bus'); toy3.say(); console.log(toy1 instanceof object); console.log(toy2 instanceof object); console.log(toy3 instanceof object);
问题:虽然解决了对象字面量创造对象冗余的问题,但是存在对象识别的问题,不能反映它们之间的内在关系。
三、构造函数模式
function toy(name) { this.name = name; this.say = function() { console.log(this.name); } } var toy1 = new toy('car'); var toy2 = new toy('car'); console.log(toy1.constructor); console.log(toy2.constructor); console.log(toy1.say === toy2.say); // false
问题:解决了工厂模式的问题,但是相同方法重复创建就浪费了内存空间。
四、原型模式
function person() {}; person.prototype = { constructor: person, name: 'mm', friends: ['mike','helen'], say: function() { console.log(this.name); } } var toy1 = new person('train'); var toy2 = new person('bus'); toy1.friends.push('suhai'); console.log(toy1.friends); console.log(toy2.friends);
问题:共享方法,解决了构造函数的问题。但是当前实例的引用类型的属性被所有实例共享,一个变所有变。
五、组合模式(构造函数+原型模式)
function person(name) { this.name = name; this.friends = ['mike','helen']; }; person.prototype = { constructor: person, say: function() { console.log(this.name); } } var toy1 = new person('train'); var toy2 = new person('bus'); toy1.friends.push('suhai'); console.log(toy1.friends); console.log(toy2.friends);
这是常用的创建方式。
通过构造函数模式定义实例属性,通过原型模式定义方法和共享的属性。