博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript创建对象方式总结
阅读量:6705 次
发布时间:2019-06-25

本文共 2926 字,大约阅读时间需要 9 分钟。

  hot3.png

今天阅读了JavaScript高级程序设计的第6章,关于对象创建的方式,这里做下总结,巩固下知识

JavaScript创建对象的五种方式:

一、通过字面量或Object构造函数创建

1、示例:

// 通过Object构造函数来创建var person = new Object();person.name = "mary";person.age = 28;person.sayHello = function() {    alert(this.name + "say hello world");}console.log(person.constructor.name);    // Object// 通过字面量来创建var person = {    name: "mary",    age: 28,    sayHello: function() {        alert(this.name + "say hello world");    }}console.log(person.constructor.name);    // Object

 

2、优点:简单灵活

3、缺点:

1)无法识别对象类型,通过person.constructor属性(该属性是从Object.prototype中继承来的)可以看到,不管是通过构造函数,还是字面量(底层也是使用new Object来创建对象的),对象构造器属性均为Object。

2)每次创建相同对象需要写大量的重复代码,每创建一个对象均需要重复的书写name、age、sayHello

 

 二、通过工厂模式创建

1、示例:

function createPerson(name, age) {    var person = new Object();    person.name = name;    person.age = age;    person.sayHello = function() {        alert(this.name + "say hello world");    }    return person;}var person = createPerson("mary",28);console.log(person.constructor.name);    // Object

2、优点:不用每次创建对象时,都写一批重复的代码(通过字面量创建的),也就是创建对象的时候原先需要数行才能完成的工作,现在只需要一行即可

3、缺点:仍然无法识别对象的类型,创建的对象构造器指向的函数仍然都是Object

 

 三、通过构造函数模式创建

1、示例:

function Person(name, age) {    this.name = name;    this.age = age;    this.sayHello = function() {        alert(this.name + "say hello world");    }}var person = new Person("mary", 28);console.log(person.constructor.name);    // Person

2、优点:可以识别对象的类型,person实例的constructor属性指向构造函数Person,也就解决了对象的识别问题

3、缺点:每次创建对象时,都实例化对象的属性,其中sayHello为函数对象,这将导致相同功能的代码,重复多余的创建对象,进而产生大量的内存浪费

 

 四、通过原型模式创建

1、示例

function Person() {}Person.prototype.name = "mary";Person.prototype.age = 28;Person.sayHello = function() {    alert(this.name + "say hello world");}var person = new Person();

2、优点:每次实例化对象时,仅在对象首次创建时,初始化原型对象,也就是sayHello函数对象仅创建一次,节省了不少内存资源

3、缺点:所有的实例对象共享原型对象的属性,如果原型对象中包含对象的引用,其中一个实例改变了引用对象的值,将影响到其它所有的实例对象

function Person() {}Person.prototype.books = ["Java编程思想", "JavaScript权威指南"];Person.prototype.name = "person";var mary = new Person();mary.books.push("JavaScript高级程序设计");mary.name = "mary";console.log(mary.books);    // ["Java编程思想", "JavaScript权威指南", "JavaScript高级程序设计"]console.log(mary.name);     // maryvar tony = new Person();console.log(tony.books);    // ["Java编程思想", "JavaScript权威指南", "JavaScript高级程序设计"]console.log(tony.name);     // person

可以看到Person的原型对象中定义了一个数组引用属性和字符串属性,当mary实例更改了数组引用属性的值时,tony实例的属性也被更改了,但当mary对象更改name属性时,却不影响tony实例,因为相当于mary自己重新定义了name属性

 

 五、动态原型模式

1、示例:

function Person(name) {    this.name = name;    if(typeof this.sayHello != "function") {        console.log("init person prototype property");        Person.prototype.sayHello = function() {            alert(this.name + "say hello");        }    }}var mary = new Person("mary");var tony = new Person("tony");// init person prototype property

2、优点:有过类似java面向对象语言经验的,会觉得javascript的原型模式创建对象语法很怪,写法松散,这样我们可以采用动态原型模式,将构造函数的原型代码书写在构造函数内部,通过判断语句,来保证仅在第一次调用构造函数的时候,初始化对象。

3、缺点:构造函数中的代码变得略复杂

 

 

转载于:https://my.oschina.net/kolbe/blog/684332

你可能感兴趣的文章
dotnet检测类型是否为泛型
查看>>
Android 悬浮窗权限校验
查看>>
使用CefSharp在.Net程序中嵌入Chrome浏览器(九)——性能问题
查看>>
mysql 创建数据库 并设置utf8格式
查看>>
IDA 逆向工程 反汇编使用
查看>>
CentOS7单独安装Apache Bench压力测试工具
查看>>
python植入后门backdoor程序的方法?
查看>>
WPF 使用 Direct2D1 画图 绘制基本图形
查看>>
导入其他python文件或者python文件的函数
查看>>
80端口被NT kernel & System 占用pid 4
查看>>
ThreadPoolExecutor的corePoolSize和maximumPoolSize
查看>>
Multiverse in Doctor Strange // Multiverse在《神秘博士》
查看>>
30天敏捷结果(22):设计你的一天
查看>>
ASP.NET MVC(Razor)上运用UEditor和xhEditor编辑器检测到有潜在危险的 Request.Form的真正解决办法...
查看>>
6个重要的.NET概念:栈,堆,值类型,引用类型,装箱,拆箱
查看>>
『原创』用C++开发WM应用系列(1)——"Hello World" Pro!(上)
查看>>
Windows Phone 7书托
查看>>
tasklist、taskkill、taskmgr
查看>>
【T08】避免重新编写TCP
查看>>
android Fragment
查看>>