Javascript创建对象的七种常用方式 |
您所在的位置：网站首页 › java创建对象的四种方式 › Javascript创建对象的七种常用方式 |
Javascript创建对象的七种常用方式
|
js常用的几种创建对象的方式有： 1、{} 2、new Ｏbject() 3、使用字面量 4、工厂模式 5、构造函数模式（constructor） 6、原型模式（prototype） 7、构造函数+原型模式 还有一些不常用的方式，如动态原型，寄生构造函数，稳妥构造函数。 一、通过{}创建对象 'use strict'; //使用strict模式 /** 使用{}创建对象，等同于 new Object(); **/ var o = {}; o.name = 'jack'; o.age = 20; o.sayName = function(){ alert(this.name); } alert(o.name+'-'+o.age); o.sayName();如果对象不用重复创建，这种方式是比较方便的。 二、通过new Object()创建对象 'use strict'; // 使用 new Object() 创建对象 var o = new Object(); o.name = "zhangsna"; o.sayName = function(){ alert(this.name); } o.sayName(); alert('o instanceof Object>>>>>>>>>>>'+(o instanceof Object));//true alert("typeof o >>>>> "+typeof o);//object三、使用字面量创建对象 对象字面变量是对象定义的一种简写形式,举个例子： var person = {name: 'zhang', age:20}， 这就是字面量形式，完全等价于var person = {}; person.name='zhang'; person.age=20; 小结：前面三种创建对象的方式存在2个问题：1.代码冗余； 2.对象中的方法不能共享，每个对象中的方法都是独立的。 四、使用工厂模式创建对象 这种方式是使用一个函数来创建对象，减少重复代码，解决了前面三种方式的代码冗余的问题，但是方法不能共享的问题还是存在。 'use strict'; // 使用工厂模式创建对象 // 定义一个工厂方法 function createObject(name){ var o = new Object(); o.name = name; o.sayName = function(){ alert(this.name); }; return o; } var o1 = createObject('zhang'); var o2 = createObject('li'); //缺点：调用的还是不同的方法 //优点：解决了前面的代码重复的问题 alert(o1.sayName===o2.sayName);//false五、通过构造函数创建对象 所谓构造函数，也是普通的函数，不过约定俗成，构造函数的名称首字母大写，普通函数的首字母小写。通过new 构造函数来创建对象。 'use strict'; /** * 构造函数模式创建对象 **/ function Person(name){ this.name = name; this.sayName = function(){ alert(this.name); }; } var p1 = new Person('zhang'); var p2 = new Person('li'); p1.sayName(); p2.sayName(); alert(p1.constructor === p2.constructor);//true alert(p1.constructor === Person);//true alert(typeof(p1));//object alert(p1 instanceof Object); //true alert(p2 instanceof Object); //trueb alert(p1.sayName===p2.sayName);//false
通过内存模型，可以发现，sayName函数是独立存在于每个对象的，所以p1.sayName===p2.sayName结果为false，还是没有解决方法不能共享的问题。 六、通过原型模式创建对象 每个方法中都有一个原型（prototype），每个原型都有一个构造器（constructor），构造器又指向这个方法。 举个例子： function Animal(){} alert(Animal.prototype.constructor==Animal);//true原型创建对象： 'use strict'; /* * 原型模式创建对象 */ function Animal() { } Animal.prototype.name = 'animal'; Animal.prototype.sayName = function () { alert(this.name); }; var a1 = new Animal(); var a2 = new Animal(); a1.sayName(); alert(a1.sayName === a2.sayName);//true alert(Animal.prototype.constructor);//function Animal(){} alert(Animal.prototype.constructor==Animal);//true通过原型创建对象，把属性和方法绑定到prototype上，通过这种方式创建对象，方法是共享的，每个对象调用的是同一个方法。
访问的顺序：对象本身>构造函数的prototype 如果对象中没有该属性，则去访问prototype，如果prototype中没有，继续访问父类，直到Object，如果都没有找到，返回undefined 'use strict'; /* * 原型模式创建对象 */ function Animal() { } Animal.prototype.name = 'animal'; Animal.prototype.sayName = function () { alert(this.name); }; var a1 = new Animal(); var a2 = new Animal(); a1.sayName(); alert(a1.sayName === a2.sayName);//true alert(Animal.prototype.constructor);//function Animal(){} //修改a2.name，a1的name不会变 a2.name = 'dog'; a2.sayName();//dog a1.sayName();//animal
七、通过原型+构造函数的方式创建对象 这种方式结合了上面两种方式，解决了代码冗余，方法不能共享，引用类型改变值的问题。 'use strict'; function Animal(name){ this.name = name; this.friends = ['dog','cat']; } Animal.prototype.sayName = function(){ alert(this.name); }; var a1 = new Animal('d'); var a2 = new Animal('c'); a1.friends.push('snake'); alert(a1.friends);//[dog,cat,snake] alert(a2.friends);//[dog,cat]
https://www.jianshu.com/p/1fb0447db852 |
如果往新建的对象中加入属性，那么这个属性是放在对象中，如果存在与原型同名的属性，也不会改变原型的值。但是访问这个属性，拿到的是对象的值。
这种方式创建的对象会存在问题，假如原型中包含有引用类型的属性，那么如果某个对象修改了该属性的值，所有的该原型创建的对象访问的值都会改变。
【本文地址】
今日新闻 |
推荐新闻 |