文档章节

JavaScript创建对象方式总结

kolbe
 kolbe
发布于 2016/05/30 22:14
字数 970
阅读 240
收藏 6

今天阅读了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);     // mary


var 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、缺点:构造函数中的代码变得略复杂

 

 

© 著作权归作者所有

kolbe
粉丝 122
博文 20
码字总数 21363
作品 0
成都
程序员
私信 提问
js面向对象的一些初级知识总结~~

javascript作为一门解释性脚本语言,有着其独特的魅力.既具有函数编程的特性,又具有面向对象的特征.以前的开发中,大多是使用了javascript的函数式编程,最近,发现其的面向对象也有一定的优势,...

乔康007
2013/02/24
169
0
精读《JS 引擎基础之 Shapes and Inline Caches》

1 引言 本期精读的文章是:JS 引擎基础之 Shapes and Inline Caches 一起了解下 JS 引擎是如何运作的吧! JS 的运作机制可以分为 AST 分析、引擎执行两个步骤: JS 源码通过 parser(分析器)...

黄子毅
2018/06/25
0
0
说说javascript变量类型和变量类型检测

javascript是一种弱类型语言,它的典型例子就是即变量在使用的时候可以给它赋值任何类型。那么先来看下javascript都有那些变量类型已经它们的使用方法吧。 先来看看javascript都有那些类型吧...

开源中国最帅没有之一
2014/10/16
159
0
JS 总结之原型继承的几种方式

在之前的总结中,我们详细分析了原型《JS 总结之原型》,原型很大作用用于模拟继承,这一次,我们来聊原型继承的几种方式。 🌶 前提 以一个父类为前提条件,列举 js 继承的继承方式: 🍖...

Karon_
2018/12/24
0
0
JavaScript菜鸽子基础知识总结(一)

学习JavaScript有段时间了,尽管学的不怎么好。但我相信有志者,铁杵磨成针。呵呵呵~~ ①JavaScript能做什么?我所了解的 ⑴在HTML网页中放入动态文本 ⑵响应用户在使用网页时产生的事件 ⑶检...

睡觉谁教谁叫呢
2014/02/18
68
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
1K
14
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
38
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部