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 ...
随机推荐
- 【Ubuntu】编写一个c语言代码
安装 sudo apt-get build-depgcc coding:http://www.cnblogs.com/zero1665/archive/2009/11/03/1595510.html ...
- BZOJ5329: [SDOI2018]战略游戏——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=5329 https://www.luogu.org/problemnew/show/P4606 省选 ...
- POJ. 1005 I Think I Need a Houseboat(水 )
POJ. 1005 I Think I Need a Houseboat(水 ) 代码总览 #include <cstdio> #include <cstring> #incl ...
- 差点AFO
差点就AFO了,小伙伴们一定注意护眼啊. 眼睛总算是活过来了. 还有一个月联赛,加油
- 继续bzoj
我应该可以打卡下班了,回来继续bzoj
- 【初级算法】2.买卖股票的最佳时机 II
题目: 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参与多笔交易(你必 ...
- 使用snmp4j实现Snmp功能(三)
相关链接:Snmp学习笔记使用snmp4j实现Snmp功能(一)使用snmp4j实现Snmp功能(二)使用snmp4j实现Snmp功能(三) 前两篇文章讲了如何使用Snmp4j实现Set.Get(使用 ...
- FreeRTOS 问题归纳
分配给FreeRTOS的heap过少,可能出现任务创建不成功:也可能调用vTaskStartScheduler()后有返回(也就是执行下一条程序),实质上也是vTaskStartScheduler() ...
- Foxmail安装和登录
Foxmail安装和登录... ============================== 下载Foxmail客户端:http://www.foxmail.com/ ================ ...
- mysql 添加字段 修改字段为not null
添加一个字段 ALTER TABLE jw_user_role ADD zk_env VARCHAR(16); 修改字段为not null,还要把原来的类型也写出来 ALTER TABLE jw_us ...