构造函数模式

实现方式:
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种模式的更多相关文章

  1. JavaScript中创建对象的三种模式

    JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返回. 缺点:创建的对象无法识别类型(全是Object) 2.构造函数模式: ...

  2. JavaScript中创建对象的几种模式

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. javascript中创建对象的几种不同方法

    javascript中创建对象的几种不同方法 方法一:最直白的方式:字面量模式创建 <script> var person={ name:"小明", age:20, s ...

  4. JavaScript中创建对象的三种方式!

    JavaScript中创建对象的三种方式! 第一种 利用对象字面量! // 创建对象的三种方式! // 1 对象字面量. var obj = { // 对象的属性和方法! name: 'lvhang' ...

  5. javascript中创建对象的几种方式

    1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的值. var person = new Object(); person.name=&q ...

  6. javascript 创建对象的7种模式

    使用字面量方式创建一个 student 对象: var student = function (){ name : "redjoy", age : 21, sex: women, ...

  7. 深入理解JavaScript中创建对象模式的演变(原型)

    深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...

  8. 《JAVASCRIPT高级程序设计》创建对象的七种模式

    细看javascript创建对象模式的诞生,具体的脉络为:不使用任何模式——工厂模式——构造函数模式——原型模式——组合使用构造函数模式——动态原型模式——寄生构造函数模式——稳妥构造函数模式.每一种 ...

  9. javascript中创建对象和实现继承

    # oo ##创建对象 1. 原型.构造函数.实例之间的关系 * 原型的construct->构造函数:调用isPrototypeOf(obj)方法可以判定和实例的关系:  * 构造函数的pro ...

随机推荐

  1. 【Ubuntu】编写一个c语言代码

    安装 sudo apt-get  build-depgcc coding:http://www.cnblogs.com/zero1665/archive/2009/11/03/1595510.html ...

  2. BZOJ5329: [SDOI2018]战略游戏——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=5329 https://www.luogu.org/problemnew/show/P4606 省选 ...

  3. POJ. 1005 I Think I Need a Houseboat(水 )

    POJ. 1005 I Think I Need a Houseboat(水 ) 代码总览 #include <cstdio> #include <cstring> #incl ...

  4. 差点AFO

    差点就AFO了,小伙伴们一定注意护眼啊. 眼睛总算是活过来了. 还有一个月联赛,加油

  5. 继续bzoj

    我应该可以打卡下班了,回来继续bzoj

  6. 【初级算法】2.买卖股票的最佳时机 II

    题目: 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参与多笔交易(你必 ...

  7. 使用snmp4j实现Snmp功能(三)

    相关链接:Snmp学习笔记使用snmp4j实现Snmp功能(一)使用snmp4j实现Snmp功能(二)使用snmp4j实现Snmp功能(三) 前两篇文章讲了如何使用Snmp4j实现Set.Get(使用 ...

  8. FreeRTOS 问题归纳

    分配给FreeRTOS的heap过少,可能出现任务创建不成功:也可能调用vTaskStartScheduler()后有返回(也就是执行下一条程序),实质上也是vTaskStartScheduler() ...

  9. Foxmail安装和登录

    Foxmail安装和登录... ============================== 下载Foxmail客户端:http://www.foxmail.com/ ================ ...

  10. mysql 添加字段 修改字段为not null

    添加一个字段 ALTER TABLE jw_user_role ADD zk_env VARCHAR(16); 修改字段为not null,还要把原来的类型也写出来 ALTER TABLE jw_us ...