JavaScript中创建对象的5种模式
构造函数模式
实现方式:
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function() {
return this.name
}
}
// 测试
var person = new Person('Nicholas', 29, 'Engineer');
// 检测对象类型
console.log(person.constructor === Person); // true
console.log(person instanceof Person); // true
console.log(Person instanceof Object); // true
注意:
- 构造函数名使用首字母大写。
- 使用
new操作符
创建实例。 - 优点:
- 可以使用
instanceof操作符
检测对象类型。
- 可以使用
- 缺点:
- 每个方法都要在每个实例上重新创建一遍。不同实例的同名函数不相等。
var person1 = new Person('Nicholas', 29, 'Engineer');
var person2 = new Person('Greg', 30, 'Doctor');
console.log(person1.sayName === person2.sayName); // false
原型模式
实现方式:
function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Engineer";
Person.prototype.sayName = function() {
return this.name;
}
// 测试
var person = new Person();
console.log(person.sayName()); // Nicholas
// 检测对象类型
console.log(person.constructor === Person); // true
console.log(person instanceof Person); // true
console.log(Person instanceof Object); // true
原型链:
关于原型:
- 构造函数与原型对象
- 构造函数获得一个
prototype
属性,指向函数的原型。 - 原型获得一个
constructor
属性,指向构造函数。
- 构造函数获得一个
- 实例对象与原型对象
- 创建实例后,实例获得内部属性
[[Prototype]]
或_proto_
,指向构造函数的原型。 isPrototypeOf()
方法会返回一个布尔值,可以确定实例和原型的关系。Object.getPrototypeOf()
方法会返回实例对应的原型。
- 创建实例后,实例获得内部属性
// isPrototypeOf()方法
console.log(Person.prototype.isPrototypeOf(person)); // true
// Object.getPrototypeOf()方法
console.log(Object.getPrototypeOf(person) === Person.prototype); // true
- 访问原型链
- 读取实例的属性:如果在实例中找到了该属性,则返回属性的值;如果没有找到,则继续搜索原型的同名属性,如果找到则返回该属性。
- 添加实例的属性:如果在实例中添加一个属性,而该属性与原型中的一个属性同名。则在实例中创建该属性,并屏蔽原型中的同名属性。
- 删除实例的属性:如果删除了实例的属性,则会使原型中的同名属性暴露出来。
// 添加属性
person.name = "Greg";
console.log(person.name); // Greg
// 删除属性
delete person.name;
console.log(person.name); // Nicholas
- 使用对象字面量定义原型
- 需要手动设置原型的constructor属性
- 默认的construnctor属性是不可枚举的。可以使用
Object.defineProperty()
方法定义。
function Person() {};
Person.prototype = {
// constructor: Person,
name: 'Nicholas',
age: 29,
job: 'Engineer',
sayName: function() {
return this.name;
}
};
Object.defineProperty(Person.prototype, 'constructor', {
enumerable: false,
value: Person
});
// 测试
var person = new Person();
console.log(person.sayName()); // Nicholas
// 检测对象类型
console.log(person.constructor === Person); // true
console.log(person instanceof Person); // true
console.log(Person instanceof Object); // true
注意:
- 使用
new操作符
创建实例。 - 优点:
- 可以使用
instanceof操作符
检测对象类型。 - 所有对象实例共享原型对象所包含的属性和方法。
- 可以使用
- 缺点:
- 对于引用类型值,会存在实例意外修改原型的风险。
function Student() {}
Student.prototype.friends = ['Shelby', 'Court'];
// 测试
var stu1 = new Student();
var stu2 = new Student();
stu1.friends.push('Van'); // 实例stu1修改了原型的friends属性,并影响到了stu2
console.log(stu1.friends); // ["Shelby", "Court", "Van"]
console.log(stu2.friends); // ["Shelby", "Court", "Van"]
组合模式:构造函数模式&原型模式
实现方式:
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
}
Person.prototype.sayName = function() {
return this.name;
}
// 测试
var person = new Person('Nicholas', 29, 'Engineer');
console.log(person.sayName()); // Nicholas
// 检测对象类型
console.log(person.constructor === Person); // true
console.log(person instanceof Person); // true
console.log(Person instanceof Object); // true
注意:
- 使用
new操作符
创建实例。 - 构造函数用于自定义实例属性,原型中定义方法和共享属性。
- 优点:
- 可以使用
instanceof操作符
检测对象类型。 - 每个实例都会有自己的一份实例属性的副本,同时又共享着对方法的引用,最大限度地节省了内存。
- 支持向构造函数传递参数。
- 可以使用
动态原型模式
实现方式:
function Person(name, age, job) {
// 属性
this.name = name;
this.age = age;
this.job = job;
// 方法
if (typeof this.sayName !== 'function') {
Person.prototype.sayName = function() {
return this.name;
}
}
}
// 测试
var person = new Person('Nicholas', 29, 'Engineer');
console.log(person.sayName()); // Nicholas
// 检测对象类型
console.log(person.constructor === Person); // true
console.log(person instanceof Person); // true
console.log(Person instanceof Object); // true
注意:
- 使用
new操作符
创建实例。 - 原型初始化只在初次调用构造函数时才执行。
- 不能使用对象字面量方式重写原型。否则就会切断现有实例与新原型之间的关系。
- 优点:
- 可以使用
instanceof操作符
检测对象类型。 - 把所有信息都封装在构造函数中,在构造函数中初始化原型,保持了同时使用构造函数和原型的优点。
- 可以使用
寄生构造函数模式
实现方式:
function Person(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job
o.sayName = function() {
return o.name;
}
return o;
}
// 测试
var person = new Person('Nicholas', 29, 'Engineer');
console.log(person.sayName()); // Nicholas
// 检测对象类型
console.log(person.constructor === Person); // false
console.log(person instanceof Person); // false
console.log(Person instanceof Object); // true
注意:
- 可以不使用
new操作符
创建实例。在不使用new操作符时,又被称为工厂模式。 - 在构造函数末尾添加return语句,可以重写调用构造函数时的返回值。
- 无法使用
instanceof操作符
检测对象类型。因为返回的对象与构造函数及原型之间没有关系。
参考:《JavaScript高级程序设计》
JavaScript中创建对象的5种模式的更多相关文章
- JavaScript中创建对象的三种模式
JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返回. 缺点:创建的对象无法识别类型(全是Object) 2.构造函数模式: ...
- JavaScript中创建对象的几种模式
代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- javascript中创建对象的几种不同方法
javascript中创建对象的几种不同方法 方法一:最直白的方式:字面量模式创建 <script> var person={ name:"小明", age:20, s ...
- JavaScript中创建对象的三种方式!
JavaScript中创建对象的三种方式! 第一种 利用对象字面量! // 创建对象的三种方式! // 1 对象字面量. var obj = { // 对象的属性和方法! name: 'lvhang' ...
- javascript中创建对象的几种方式
1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的值. var person = new Object(); person.name=&q ...
- javascript 创建对象的7种模式
使用字面量方式创建一个 student 对象: var student = function (){ name : "redjoy", age : 21, sex: women, ...
- 深入理解JavaScript中创建对象模式的演变(原型)
深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...
- 《JAVASCRIPT高级程序设计》创建对象的七种模式
细看javascript创建对象模式的诞生,具体的脉络为:不使用任何模式——工厂模式——构造函数模式——原型模式——组合使用构造函数模式——动态原型模式——寄生构造函数模式——稳妥构造函数模式.每一种 ...
- javascript中创建对象和实现继承
# oo ##创建对象 1. 原型.构造函数.实例之间的关系 * 原型的construct->构造函数:调用isPrototypeOf(obj)方法可以判定和实例的关系: * 构造函数的pro ...
随机推荐
- 【BZOJ3240】【NOI2013】矩阵游戏(数论)
[BZOJ3240][NOI2013]矩阵游戏(数论) 题面 BZOJ 题解 搞什么矩阵十进制快速幂加卡常? 直接数学推导不好吗? 首先观察如何从每一行的第一个推到最后一个 \(f[i]=a·f[i- ...
- POJ 2774 求两个串的最长公共前缀 | 后缀数组
#include<cstdio> #include<algorithm> #include<cstring> #define N 200005 using name ...
- 【区间DP】【lgP3146】248
传送门 Description 给定一个1*n的地图,在里面玩2048,每次可以合并相邻两个(数值范围1-40),问最大能合出多少.注意合并后的数值并非加倍而是+1,例如2与2合并后的数值为3. In ...
- 实例——简单的Samba共享
服务端配置 # 临时停止iptables service iptables stop # 临时禁用SELinux setenforce 0 # 禁止iptables开机自动启动 chkconfig i ...
- PowerDesigner 技巧【2】
去掉Oracle生成的SQL创建语句中的双引号 用powerdesigner导出orale数据库的建表sql时,默认会给表名和字段名加上双引号,如下图: 这样给操作数据库带来很大的不便,解决的办法是设 ...
- iOS AFNetworking 2.6.0框架导入报错解决方法
最近手动导入AFNetworking 2.6.0框架时发现Xcode报如下3个错误: 1. Use of undeclared identifier ‘kSecFormatUnknown‘ 2. Us ...
- Codeforces Round #337 (Div. 2) A水
A. Pasha and Stick time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- Matrix.(POJ-2155)(树状数组)
题目是让每次对一个子矩阵进行翻转(0变1,1变0), 然后有多次询问,询问某个点是0还是1 这题可以用二维的树状数组来解决,考虑传统的树状数组是改变某个点,然后查询某一段, 而这个题是改变某一段,查询 ...
- 隐藏Nginx版本号
一般来说,黑客攻击服务器的首要步骤就是收集信息,比如说你的软件版本,这些将成为下一步有针对性攻击的依据.所以说一定程度的隐藏这些信息就显得非常有必要了,本文将简单介绍如何在网络上隐藏Nginx版本号以 ...
- Foxmail安装和登录
Foxmail安装和登录... ============================== 下载Foxmail客户端:http://www.foxmail.com/ ================ ...