JavaScript：原型模式

已于 2022-10-28 22:06:43 修改
阅读量141 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 开发语言
于 2022-10-28 17:22:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JinsmLill/article/details/127575597
版权
本文深入探讨JavaScript中的原型模式，解释了操作符new和构造函数的工作原理，包括内部属性new.target和constructor，以及如何通过实例对象访问和修改原型。此外，还介绍了Object相关API如isPrototypeOf(), getPrototypeOf(), setPrototypeOf(), create()和hasOwnProperty()等。" 112706918,10295016,排序算法解析：时间复杂度与稳定性,"['排序', '算法', '数据结构']
摘要由CSDN通过智能技术生成

ECMAScript 使用 原型模式 来实现多个对象共享某个对象的所有属性的操作。

当创建一个函数对象时，会为函数对象创建一个属性 prototype 引用一个对象，被称为 原型对象 ，而原型对象会有一个属性 constructor 引用该函数对象，即函数和原型之间相互引用，形成循环引用。

对象拥有一个内部特性 [[Prototype]] ，是一个指针，指向某个原型对象。

通过对象可以直接访问原型的属性。

在访问对象的属性时，会根据属性名搜索属性，首先在当前对象中进行搜索，如果没有找到属性，就会通过内部特性 [[Prototype]] 找到对象的原型，在对象的原型中继续进行搜索。

使用同一个原型的多个对象会共享该原型的属性。

示例：

  • 函数的属性 prototype 与原型的属性 constructor 。
    function func() {}
const prototype = func.prototype,  // 函数的原型
	constructor = prototype.constructor  // 函数原型的属性 constructor 

console.log('prototype:', prototype) 
console.log('constructor:', constructor) 
console.log('constructor === func :', constructor === func)

// 输出：
// prototype: {constructor: ƒ}
// constructor: ƒ func() {}
// constructor === func : true

主要参考资料：

  • 《JavaScript 高级程序设计（第4版）》
    • P221（246/931）
    • P224（249/931）

操作符 new 与构造函数

ECMAScript 使用操作符 new 和构造函数来实现模板化创建对象的操作。

构造函数提供模板。

操作符 new 根据提供的模板创建实例对象。

操作符 new

使用操作符 new 调用函数，会执行如下操作：

  1. 在内存中创建一个新对象。
  2. 新对象的内部特性 [[Prototype]] 被赋值为函数的属性 prototype 。
  3. 函数的对象 this 被赋值为新对象。
  4. 执行函数的函数体。
  5. 如果函数有非空的返回值，则返回函数的返回值，否则返回函数的对象 this 。

示例：

function Entity() {
	console.log('execute Entity()')
}

const entity = new Entity()  // 使用操作符 new 调用函数
console.log('entity:', entity)

// 输出：
// execute Entity()
// entity: Entity {}

构造函数

使用操作符 new 调用的函数，被称为 构造函数 。

ECMAScript 的构造函数是被设计用于创建实例对象的普通函数。

构造函数与普通函数在本质上、语法上没有任何区别。

构造函数的函数名一般采用首字母大写的形式。

在构造函数中，可以使用对象 this 为使用该构造函数创建的对象添加属性。

示例：

  • 在构造函数中，使用对象 this 为使用该构造函数创建的对象添加属性。
function Entity() {
	this.attrEntity_01 = '1948'  // 为使用该构造函数创建的对象添加属性。
	this.attrEntity_02 = '2017'
}
const entity = new Entity()

console.log('entity:', entity)
// 输出：
// entity: Entity {attrEntity_01: '1948', attrEntity_02: '2017'}

函数的内部属性 new.target

函数拥有一个内部属性 new.target ，值为布尔值，表示调用函数时是否使用了操作符 new 。

示例：

  • 函数的内部属性 new.target
    function Test() {
	if(new.target) {
		console.log('invoked with new')
	}
	else {
		console.log('invoked commonly')
	}
}
const test = new Test()
Test()

// 输出：
// invoked with new
// invoked commonly

对象的属性 constructor

通过对象可以访问对象原型的属性 constructor ，引用创建该对象时使用的构造函数。

示例：

  • 对象的属性 constructor
    function Entity() {
	console.log('instantiate Entity')
}
const entity = new Entity()
console.log('entity.constructor:', entity.constructor)  // 对象的属性 constructor

// 输出：
// instantiate Entity
// entity.constructor: ƒ Entity() {
//---- console.log('instantiate Entity')
//-- }

实例对象

使用操作符 new 调用函数创建一个新对象的过程，被称为 实例化 。

使用构造函数创建的对象，被称为 实例对象 。

在实例对象上添加与原型属性同名的属性，会 遮蔽（shadow） 相应的原型属性，屏蔽对原型属性的访问，但不会覆盖原型属性。

示例：

  • 在实例对象上添加与原型属性同名的属性，遮蔽相应的原型属性。
    function Entity() {}
const prototype = Entity.prototype
prototype.attr_01 = 'prototype attr_01'
prototype.attr_02 = 'prototype attr_02'

const instance = new Entity()
instance.attr_01 = 'instance attr_01'  // 添加与原型的属性同名的属性

console.log('prototype:', prototype)
console.log('instance:', instance)
console.log('instance.attr_01:', instance.attr_01)
console.log('instance.attr_02:', instance.attr_02)

// 输出：
// prototype: {attr_01: 'prototype attr_01', attr_02: 'prototype attr_02', constructor: ƒ}
// instance: Entity {attr_01: 'instance attr_01'}
// instance.attr_01: instance attr_01
// instance.attr_02: prototype attr_02

ECMAScript 没有提供访问对象内部特性 [[Prototype]] 的标准方式。

但一些浏览器会在对象添加一个属性 __proto__ 用于访问对象的原型，例如：Firefox、Safari、Chrome 等。

示例：

  • 使用浏览器提供的属性 __proto__ 访问对象的原型。
    function Entity() {
	this.attr = '1948'
}
const entity = new Entity()
console.log('entity.__proto__:', entity.__proto__)  // 使用属性 __proto__ 访问对象的原型

// 输出：
// entity.__proto__: {constructor: ƒ}

可以通过对属性名使用操作符 in ，判断对象是否可以访问指定的属性。

示例：

  • 对属性名使用操作符 in ，判断对象是否可以访问指定的属性。
    function Entity() {
	this.instAttr = '2017'
}
Entity.prototype.protoAttr = '2021'
Entity.entityAttr = '2035'

const entity = new Entity()
console.log('protoAttr in entity:', 'protoAttr' in entity)  // 判断对象是否可以访问指定的属性
console.log('instAttr in entity:', 'instAttr' in entity)
console.log('entityAttr in entity:', 'entityAttr' in entity)
console.log('entityAttr in Entity:', 'entityAttr' in Entity)

// 输出：
// protoAttr in entity: true
// instAttr in entity: true
// entityAttr in entity: false
// entityAttr in Entity: true

图示：

  • 原型模式：“原型 - 构造函数 - 实例”

原型模式：“原型 - 构造函数 - 实例”

动态设置构造函数的属性 prototype

在动态设置构造函数的属性 prototype 时，可以使用对象字面量对构造函数的属性 prototype 进行赋值。

但使用对象字面量创建对象时，实际调用的是 new Object() ，所以使用对象字面量创建的对象的原型的属性 constructor 是 Object() 。

当将该对象作为构造函数的属性 prototype 时，意味着构造函数原型的属性 constructor 是 Object()。

如果希望修正构造函数的原型的属性 constructor ，可以使用对象字面量创建对象时，为对象添加自身的属性 constructor 来遮蔽对象的原型的属性 constructor 。

但使用对象字面量定义的属性 constructor 的内部特性 [[Enumerable]] 为 true ，而 ECMAScript 默认原型的属性 constructor 是不可枚举的。

如果希望遵循原生的属性 constructor 的设定，则需要单独使用方法 Object.defineProperty() 来重新定义构造函数原型的属性 constructor 。

示例：

  • 使用对象字面量对构造函数的属性 prototype 进行赋值，并遮蔽原型的属性 constructor 。

    function Entity() {
	this.instanceAttr = '1948'
}
Entity.prototype = {
	constructor: Entity,  // 遮蔽原型的属性 constructor  
	prototypeAttr: '2017'
}  // 使用对象字面量对构造函数的属性 prototype 进行赋值
const entity = new Entity()

console.log('Entity.prototype:', Entity.prototype)
console.log('Entity.prototype.constructor:', Entity.prototype.constructor)
console.log('entity:', entity)
console.log('entity.prototypeAttr:', entity.prototypeAttr)

// 输出：
// Entity.prototype: {prototypeAttr: '2017', constructor: ƒ}
// Entity.prototype.constructor: ƒ Entity()
// entity: Entity {instanceAttr: '1948'}
// entity.prototypeAttr: 2017

  • 使用对象字面量对构造函数的属性 prototype 进行赋值，并使用方法 Object.defineProperty() 重新定义构造函数原型的属性 constructor 。

    function Entity() {
	this.instanceAttr = '1948'
}
Entity.prototype = { 
	prototypeAttr: '2017'
}  // 对构造函数的属性 prototype 进行赋值
Object.defineProperty(
	Entity.prototype,
	'constructor',
	{
		configurable: true,
		enumerable: false,
		writable: false,
		value: Entity
	}
)  // 重新定义构造函数原型的属性 constructor 
const entity = new Entity()

console.log('Entity.prototype:', Entity.prototype)
console.log('Entity.prototype.constructor:', Entity.prototype.constructor)
console.log('entity:', entity)
console.log('entity.prototypeAttr:', entity.prototypeAttr)

// 输出：
// Entity.prototype: {prototypeAttr: '2017'}
// Entity.prototype.constructor: ƒ Entity()
// entity: Entity {instanceAttr: '1948'}
// entity.prototypeAttr: 2017

主要参考资料：

  • 《JavaScript 高级程序设计（第4版）》- P234（259/931）

相关 API

对象的方法 isPrototypeOf()

对象的方法 isPrototypeOf() ：

  • 功能：
    判断指定对象的内部特性 [[Prototype]] 是否指向当前对象。

  • 接收一个参数：
    对象，目标对象。

  • 返回值：
    布尔值，目标对象的内部特性 [[Prototype]] 是否指向当前对象。

示例：

  • 使用对象的方法 isPrototypeOf() ，判断指定对象的内部特性 [[Prototype]] 是否指向当前对象。
    function Entity() {}
const entity = new Entity()

console.log('Entity.prototype is protoype of entity:', Entity.prototype.isPrototypeOf(entity))  // 判断对象的内部特性 [[Prototype]] 的指向

// 输出：
// Entity.prototype is protoype of entity: true

Object.getPrototypeOf()

方法 Object.getPrototypeOf() ：

  • 功能：
    获取指定对象的内部特性 [[Prototype]] 指向的原型。

  • 接收一个参数：
    对象，目标对象。

  • 返回值：
    对象，目标对象的内部特性 [[Prototype]] 指向的原型。

示例：

  • 使用方法 Object.getPrototypeOf() ，获取指定对象的内部特性 [[Prototype]] 指向的原型。
    function Entity() {}
Entity.prototype.type = 'Entity'
const entity = new Entity()

console.log('protoype of entity:', Object.getPrototypeOf(entity))  // 获取对象的内部特性 [[Prototype]] 指向的原型

// 输出：
// protoype of entity: {type: 'Entity', constructor: ƒ}

Object.setPrototypeOf()

方法 Object.setPrototypeOf() ：

  • 功能：
    动态设置指定对象的内部特性 [[Prototype]] 。

  • 接收两个参数：

    1. 对象
      目标对象。

    2. 对象
      目标对象的内部特性 [[Prototype]] 需要指向的对象。

  • 返回值：
    对象，动态设置内部特性 [[Prototype]] 后的目标对象。

但不建议在编程过程中重写实例的原型，因为在重写实例的原型之前，可能已经在很多地方使用了该实例，如果此时重写实例的原型，将会影响此前所有引用该实例的代码，造成严重的性能问题。

示例：

  • 使用方法 Object.setPrototypeOf() ，动态设置指定对象的内部特性 [[Prototype]] 。
    function EntityA() {}
EntityA.prototype.type = 'EntityA'

function EntityB() {}
EntityB.prototype.type = 'EntityB'

const entity = new EntityA()
Object.setPrototypeOf(entity, EntityB.prototype)  // 动态设置指定对象的内部特性 [[Prototype]] 

console.log('protoype of entity:', Object.getPrototypeOf(entity))

// 输出：
// protoype of entity: {type: 'EntityB', constructor: ƒ}

Object.create()

方法 Object.create() ：

  • 功能：
    创建一个内部特性 [[Prototype]] 指向指定对象的新对象。

  • 接收两个参数：

    1. 对象
      目标对象。

    2. 对象（可选）
      属性定义对象，为新对象定义的属性。

  • 返回值：
    对象，一个内部特性 [[Prototype]] 指向目标对象的新对象。

示例：

  • 使用方法 Object.create() ，创建一个内部特性 [[Prototype]] 指向指定对象的新对象。
    const prototypeObj = {
		prototypeAttr: '1948'
	},
	definePropertyObj = {
		instanceAttr: {
			configurable: true,
			enumerable: true,
			writable: true,
			value: '2017'
		}
	},  // 属性定义对象
	obj = Object.create(prototypeObj, definePropertyObj)  // 创建一个内部特性 [[Prototype]] 指向指定对象的新对象

console.log('obj:', obj)
console.log('obj.prototypeAttr:', obj.prototypeAttr)
console.log('prototypeObj is protoype of obj:', prototypeObj.isPrototypeOf(obj))

// 输出：
// obj: {instanceAttr: '2017'}
// obj.prototypeAttr: 1948
// prototypeObj is protoype of obj: true

对象的方法 hasOwnProperty()

对象的方法 hasOwnProperty() ：

  • 功能：
    判断当前对象是否存在指定属性名的属性。

  • 接收一个参数：
    字符串 | 符号，属性名。

  • 返回值：
    布尔值，当前对象是否存在指定属性名的属性。

示例：

  • 使用对象的方法 hasOwnProperty() ，判断当前对象是否存在指定属性名的属性。
    function Entity() {
	this.instAttr = '2045'
}
Entity.entityAttr = '2049'
const entity = new Entity()

console.log('entity has instAttr attribute:', entity.hasOwnProperty('instAttr'))  // 判断当前对象是否存在指定属性名的属性
console.log('entity has entityAttr attribute:', entity.hasOwnProperty('entityAttr'))
console.log('Entity has entityAttr attribute:', Entity.hasOwnProperty('entityAttr'))

// 输出：
// entity has instAttr attribute: true
// entity has entityAttr attribute: false
// Entity has entityAttr attribute: true
JinsmLill
关注
专栏目录
深入理解JavaScript系列（42）：设计模式之原型模式详解
12-10
介绍 原型模式（prototype）是指用原型实例指向创建对象的种类，并且通过拷贝这些原型创建新的对象。 正文 对于原型模式，我们可以利用JavaScript特有的原型继承特性去创建对象的方式，也就是创建的一个对象作为另外一个对象的prototype属性值。原型对象本身就是有效地利用了每个构造器创建的对象，例如，如果一个构造函数的原型包含了一个name属性（见后面的例子），那通过这个构造函数创建的对象都会有这个属性。 在现有的文献里查看原型模式的定义，没有针对JavaScript的，你可能发现很多讲解的都是关于类的，但是现实情况是基于原型继承的JavaScript完全避免了类（class）的概
javascript的原型模式
sunny_jiangsu的博客
11-01 217
javascript的原型模式 认识原型 每个函数都有一个原型prototype属性，指向原型对象。使用原型对象的好处就是让所有实例共享原型对象所包含的属性和方法。 function Person(name, age){ this.name = name; this.age = age; } var p1 = new Person("tom",12); Person的prototype属...
Javascript 原型模式
Miever的博客
10-25 255
Javascript原型模式 我们创建的每个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解，那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说，不必在构造函数中定义对象实例的信息，而...
JavaScript的原型模式
Xzh的博客
10-23 182
我的理解今天重新看了下高程的面向对象设计那一章（重点是看了原型模式），下面有三种创建对象的方法：1.工厂模式：function createObj(name, usefor) { var obj = new Object(); o.name = name; o.usefor = usefor; o.sayName = function() { cons
Javascript之原型模式
yuting_sun的博客
05-14 262
原型
javascript-patterns:JavaScript模式，原型模式和带有示例实现的实验
04-08
本文将深入探讨JavaScript中的模式，包括原型模式，并通过实例来演示其用法。 首先，让我们理解什么是设计模式。设计模式是软件开发中经过时间验证的通用解决方案，它们针对常见的编程问题提供了一套标准的解决方法...
javascript 原型模式实现OOP的再研究
10-30
JavaScript中的原型模式是一种实现面向对象编程（OOP）的关键机制，它基于原型继承，使得对象可以从其他对象那里获得属性和方法。在这个模式下，每个函数都有一个`prototype`属性，这个属性是一个对象，用于共享属性...
javascript组合使用构造函数模式和原型模式实例
10-24
在JavaScript中，对象的创建有两种主要的模式：构造函数模式和原型模式。构造函数模式和原型模式都有其优点和限制，组合使用这两种模式可以有效地提高代码的效率和灵活性。 构造函数模式的核心思想是定义一个构造...
JavaScript中的原型模式
最新发布
Blueskyzhw的博客
11-14 267
优点：由于JavaScript是一门基于原型的面向对象语言，每个对象（除null外）创建的时候，都会关联另一个对象，这个关联对象就是原型，每一个对象都会从原型中继承属性。这种模式不仅是实现继承的简单方法，而且还可以带来性能提升：在对象中定义函数时，它们都是通过引用创建的 (因此所有子对象都指向同一个函数)，而不是创建它们自己的单独副本。缺点：由于JavaScript中没有传统的面向对象语言的继承，原型模式需要通过修改原型对象来改变与之关联的对象，这可能会导致代码调试和维护的难度增加。
JavaScript设计模式——原型模式
前端御书房
10-06 457
JavaScript设计模式，原型模式——持续更新中
JavaScript-设计模式(四) 原型模式
weixin_52624209的博客
08-12 343
JavaScript 常见设计模式之 原型模式，通过本节课的学习 ，您将了解到原型模式的基本概念、优缺点、使用场景、以及代码简单的实现简单~
javascript设计模式 - 原型模式
lume博客
08-17 897
原型模式 1 ： 原型的定义： （1）每当创建一个函数，都会有一个 prototype （原型属性）。 （2）原型（prototype） 这个属性的指针 指向一个对象，而这个对象的用途 可以由特定类型的所有实例 共享 属性和方法 ！ （3）原型（prototype）是共享所有的属性和方法， 也就是说：如果 new 了 两个实例化 ，他们的方...
javascript设计模式五: 原型模式
一期一会的博客
01-07 752
在javascript语言中，原型与原型链是一个非常重要的概念，因为它们是javascript语言得以成立的根本。因为javascript是基于原型的面向对象编程语言，这有别于基于类的java、python等面向对象编程语言。虽然javscript现在也有了class，但它骨子里还是个基于原型的语法糖罢了。所以在使用javascript时，始终要记清基于原型，基于原型，基于原型。 在说原型和原型链...
Js之原型模式
wf592523813的博客
08-08 403
javascript中的原型
原型/原型链
lilisiyang___的博客
09-17 124
每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象。这个对象包含特定类型的所有实例的属性和方法。也就是，prototype是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象，可以让所有对象实例共享它所包含的属性和方法。 理解原型对象 只要创建了一个函数，该函数就会拥有一个prototype属性，指向该函数的原型对象。默认情况下，所有原型对象都会自动获得一个constructor（构造函数）属性，这个属性是一个指向prototype所在函数的指针。 创建了自定义构造
46 使用构造函数创建对象
Blog of Lytracy
09-18 3949
文章目录1、JavaScript内置的构造函数2、自定义构造函数3、构造函数中的return关键字 1、JavaScript内置的构造函数 JavaScript提供了Object、String、Number等构造函数，通过“new 构造函数()”即可创建对象。使用new关键字创建对象的过程称为实例化，实例化后得到的对象称为构造函数的实例。 // 通过构造函数创建对象 var obj = new Object(); // 创建Object对象 var str = new String('123');
对象 —【使用构造函数创建对象】
Zyl_CN的博客
05-29 939
var Car = function() { this.wheels = 4; this.engines = 1; this.seats = 1; }; var myCar=new Car(); // 使用构造函数时,我们通过在它前面使用new关键字来对它进行调用var Car = function(wheels,seats,engines) { this.wheel...
JavaScript： 设计模式之原型模式
Hr_ving的博客
09-23 479
JavaScript： 设计模式之原型模式 JavaScript中存在着许许多多的设计模式，这些模式都可以帮助我们更快更好的规划代码 下面就来介绍一下JavaScript中的原型模式 原型模式： 原型模式是一种 创建对象 的模式 即： ​ 通过一个对象作为原型来创建新的对象（创建一个对象作为另一个对象的__proto__属性） 原理： 原型链 用到的方法： Object.create(新创建对象的原型对象,[初始化额外的其他属性]) //第二个参数为可选 该方法表示: ​ 创建一个新对象，使用现有的
JavaScript 原型模式
qq_38860226的博客
01-16 1631
JavaScript原型模式 1. 普通对象 var o1 = {} var o2 = new Object() var o3 = new f1() 除了函数对象就是普通对象 2. 函数对象 function f1(){} var f2 = function(){} var f3 = new Function() 函数对象本质上都是通过new Function()创造的
深入理解JavaScript：原型、继承与构造函数
"本文主要探讨JavaScript中的原型和继承机制，适合初学者理解构造函数、原型以及原型链的...熟练掌握构造函数、原型和原型链的概念，可以帮助开发者更好地利用JavaScript的面向对象特性，实现复杂的功能和设计模式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值