Javascript创建对象的七种常用方式

js常用的几种创建对象的方式有：

1、{}
2、new Ｏbject()
3、使用字面量
4、工厂模式
5、构造函数模式（constructor）
6、原型模式（prototype）
7、构造函数+原型模式

还有一些不常用的方式，如动态原型，寄生构造函数，稳妥构造函数。

一、通过{}创建对象

  <script>'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();</script>

如果对象不用重复创建，这种方式是比较方便的。

二、通过new Object()创建对象

<script>'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));//truealert("typeof o >>>>> "+typeof o);//object</script>

三、使用字面量创建对象

对象字面变量是对象定义的一种简写形式,举个例子：
var person = {name: 'zhang', age:20}，这就是字面量形式，完全等价于var person = {}; person.name='zhang'; person.age=20;

小结：前面三种创建对象的方式存在2个问题：1.代码冗余； 2.对象中的方法不能共享，每个对象中的方法都是独立的。

四、使用工厂模式创建对象

这种方式是使用一个函数来创建对象，减少重复代码，解决了前面三种方式的代码冗余的问题，但是方法不能共享的问题还是存在。

<script>'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</script>

五、通过构造函数创建对象

所谓构造函数，也是普通的函数，不过约定俗成，构造函数的名称首字母大写，普通函数的首字母小写。通过new 构造函数来创建对象。

 <script>'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);//truealert(p1.constructor === Person);//truealert(typeof(p1));//objectalert(p1 instanceof Object); //truealert(p2 instanceof Object); //truebalert(p1.sayName===p2.sayName);//false</script>

通过内存模型，可以发现，sayName函数是独立存在于每个对象的，所以p1.sayName===p2.sayName结果为false，还是没有解决方法不能共享的问题。

六、通过原型模式创建对象

每个方法中都有一个原型（prototype），每个原型都有一个构造器（constructor），构造器又指向这个方法。

举个例子：

function Animal(){}
alert(Animal.prototype.constructor==Animal);//true

原型创建对象：

  <script>'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);//truealert(Animal.prototype.constructor);//function Animal(){}alert(Animal.prototype.constructor==Animal);//true</script>

通过原型创建对象，把属性和方法绑定到prototype上，通过这种方式创建对象，方法是共享的，每个对象调用的是同一个方法。

如果往新建的对象中加入属性，那么这个属性是放在对象中，如果存在与原型同名的属性，也不会改变原型的值。但是访问这个属性，拿到的是对象的值。

访问的顺序：对象本身>构造函数的prototype

如果对象中没有该属性，则去访问prototype，如果prototype中没有，继续访问父类，直到Object，如果都没有找到，返回undefined

 <script>'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);//truealert(Animal.prototype.constructor);//function Animal(){}//修改a2.name，a1的name不会变a2.name = 'dog';a2.sayName();//doga1.sayName();//animal</script>

这种方式创建的对象会存在问题，假如原型中包含有引用类型的属性，那么如果某个对象修改了该属性的值，所有的该原型创建的对象访问的值都会改变。

 <script>'use strict';//原型模式2//存在的问题：如果原型中含有引用类型function Animal (){}Animal.prototype = {name: 'animal',friends: ['dog','cat'],sayName: function(){alert(this.name);}};var a1 = new Animal();var a2 = new Animal();a2.friends.push('snake');alert(a2.friends);//[dog,cat,snake]alert(a1.friends);//[dog,cat,snake]</script>

七、通过原型+构造函数的方式创建对象

这种方式结合了上面两种方式，解决了代码冗余，方法不能共享，引用类型改变值的问题。

 <script>'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]</script>

https://www.jianshu.com/p/1fb0447db852

Javascript创建对象的七种常用方式相关推荐

js创建对象的几种常用方式小结(推荐)
(转http://www.jb51.net/article/25093.htm) 第一种模式:工厂方式复制代码代码如下: var lev=function(){ return "脚本之家 ...
JavaScript中七种函数调用方式及对应 this 的含义
http://blog.sina.com.cn/s/blog_621f1e120100rj21.html this 在 JavaScript 开发中占有相当重要的地位,不过很多人对this这个东西都感 ...
JavaScript中的几种继承方式及优缺点,你知道多少呢？
原文连接:JavaScript中的几种继承方式及优缺点,你知道多少呢? 继承也是前端里面的重要的一个知识点,在实际工作中或者面试中也会经常的遇到,那么通过这篇文章我们详细的了解一下继承的几种方式以及各 ...
java 解析/操作 xml 几种常用方式 xml的增加/删除/修改
java 解析/操作 xml 几种常用方式 xml的增加/删除/修改首先,我们先介绍几种常用的xml解析器. 1. 介绍 1)DOM(JAXP Crimson解析器) DOM是用与平台和语言无关的方 ...
【方法整理】Oracle 获取trace跟踪文件名的几种常用方式
[方法整理]Oracle 获取trace跟踪文件名的几种常用方式 1 BLOG文档结构图 2 前言部分 2.1 导读和注意事项各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其 ...
Silve37.Silverlight和ASP.NET相互传参的两种常用方式(QueryString,Cookie)
在本节中将讲述Silverlight和ASP.NET页面的相互传参的两种常用方式:Cookie和QueryString.首先我们新建一个名为SLConnectASP.NET的Silverlight应 ...
JavaScript对象的几种创建方式?
**` JavaScript对象的几种创建方式? `**
Windows校验文件哈希hash的两种常用方式
大家经常都到哪儿去下载软件和应用程序呢?有没想过下载回来的软件.应用程序或资源是否安全呢?在 Windows 10 和 Office 2016 发布当初,很多没权限的朋友都使用第三方网站去下载安装映像 ...
Ngnix安装的几种常用方式
Ngnix安装的几种常用方式本文介绍了如何安装NGINX开源. 在稳定版还是主线版之间进行选择在预编译的程序包和从源代码进行编译之间进行选择安装预编译包预建套件中包含的模块安装预建的Cent ...

Javascript创建对象的七种常用方式

Javascript创建对象的七种常用方式相关推荐

最新文章

热门文章