【JavaScript】14.对象-构造函数和原型

最新推荐文章于 2023-02-07 10:59:32 发布
最新推荐文章于 2023-02-07 10:59:32 发布
阅读量279 收藏 1
点赞数
文章标签： javascript 原型模式 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42591485/article/details/124716031
版权

创建对象

ES6 开始正式支持类和继承。ES6 的类仅仅是封装了 ES5.1 构造函数加上原型继承的语法糖。

1 工厂模式

工厂模式是一种设计模式，用于抽象创建特定对象的过程。下面是一个工厂模式创建对象的例子：

function createPerson(name, age) {
  return { name, age };
}
const p1 = createPerson("foo", 18);		// { name: 'foo', age: 18 }
const p2 = createPerson("bar", 20);		// { name: 'bar', age: 20 }

工厂模式解决了创建多个类似对象的问题，但是没有解决对象的标识问题。也就是说新创建的对象是什么类型还是不知道。

2 构造函数模式

构造函数用于创建特定类型的对象。像 Object 和 Array 这样的原生构造函数可以直接使用。也可以自定义构造函数，以函数的形式为自己的对象定义函数和方法。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const p1 = new Person("foo", 18);	// Person { name: 'foo', age: 18 } 
const p2 = new Person("bar", 20);	// Person { name: 'bar', age: 20 }

使用 Person() 构造函数代替 createPerson() 工厂函数。实际上，Person() 内部的代码和 createPerson() 基本一样，区别如下：

  1. 没有显式创建对象。
  2. 属性和方法直接赋值给了 this。
  3. 没有 return。

按照惯例，作为构造函数的函数名首字母大写 ，非构造函数以小写开头。这有助于区分构造函数和普通函数。

2.1 创建实例

要创建一个对象类型的实例，应使用 new 操作符，后面跟上构造函数。以这种形式调用构造函数会执行以下操作：

  1. 在内存中创建一个新的对象。
  2. 这个对象内部的[[Prototype]]特性被赋值为构造函数的 prototype 属性。
  3. 构造函数内部的 this 被赋值为这个新对象。即 this 指向新对象。
  4. 执行构造函数内部的代码。即给新对象添加属性。
  5. 如果构造函数返回空对象，则返回该对象。

上个例子中，p1 和 p2 分别保存着 Person 的一个实例。这两个对象都有一个 constructor 属性指向 Person：

console.log(p1.constructor === Person);
console.log(p2.constructor === Person);

constructor 本来是用来标识对象类型的。不过一般认为 instanceof 操作符是确定对象类型更为靠谱的方式。前面的两个对象都是 Object 的实例，同时也是 Person 的实例。

console.log(p1 instanceof Person);	// true
console.log(p1 instanceof Object);	// true

构造函数不一定写成函数声明的形式。赋值给变量的函数表达式也可以表示构造函数。

let Person = function (age, name) {
  this.age = age;
  this.name = name;
};
const p = new Person(18, "foo");	// Person { age: 18, name: 'foo' }

实例化时，如果不想传递参数，那么构造函数后面的括号可以省略。只要有 new 操作符，就可以调用相应的构造函数。

let Person = function () {
  this.age = 18;
  this.name = 'foo';
};
const p = new Person;	// 不传参，可以省略构造函数后面的括号

2.2 构造函数也是函数

构造函数和普通函数唯一的区别就是调用的方式不同。任何函数只要使用 new 操作符去调用就是构造函数，不使用 new 操作符调用的函数就是普通函数。

2.3 构造函数的问题

构造函数解决了对象标识的问题，但是构造函数也不是没有问题。构造函数的问题在于，其定义的方法会在每一个对象实例上都创建一遍，这些方法不是指向同一个 Function 实例。不同实例上的函数虽然同名但是不相等。

let Person = function () {
  this.sayName = function () {
    console.log("foo");
  };
};
const p1 = new Person();
const p2 = new Person();
console.log(p1.sayName === p2.sayName);	// false

因为都是做同一件事，因此没必要定义两个不用的 Function 实例。可以将函数定义移到构造函数外来解决这个问题。

let sayName = function () {		// 在构造函数外定义方法
  console.log("foo");			
};
let Person = function () {		
  this.sayName = sayName;		// 构造函数内部引用这个方法
};

这种方式虽然解决了相同逻辑的函数重复定义的问题，但是构造函数内部使用的方法泄露到了构造函数外面。这个问题可以通过原型模式来解决。

3 原型模式

每个函数都会创建一个 prototype 属性，这个属性是一个对象，包含应该由特定引用类型的实例共享的属性和方法。这个对象就是通过调用构造函数创建的对象的原型。

使用原型对象的好处是，在它上面定义的属性和方法可以被对象实例共享。原来在构造函数中直接赋值给对象实例的值，可以直接赋值给它们的原型。

function Person() {}
Person.prototype.name = "foo";
Person.prototype.sayName = function () {
  console.log(this.name);
};
const person1 = new Person();
const person2 = new Person();

console.log(person1.name);
person1.sayName();

console.log(person2.name);
person2.sayName();

3.1 理解原型

3.1.1 原型对象身上的 constructor 属性

只要创建一个函数，就会为这个函数创建一个 prototype 属性，这个属性指向原型对象。所有的原型对象自动获得一个名为 constructor 的属性，指回与之关联的构造函数。

console.log(Person.prototype.constructor === Person); // Person
3.1.2 原型链

每次调用构造函数创建一个实例，这个实例内部的[[Prototype]] 指针都会被赋值为构造函数的原型对象。

脚本中没有访问这个Prototype特性的标准方法，但是浏览器会在每个对象上暴露__proto__这个属性。通过这个属性可以访问到对象的原型。

也就是说，实例的__proto__上存放着构造函数的prototype：

function Person() {}
let person = new Person();

console.log(person.__proto__ === Person.prototype);		// true

而构造函数的 prototype 属性值同样也是一个对象实例。构造函数的 prototype 的 __proto__属性指向Object 构造函数的 prototype属性。

console.log(Person.prototype.__proto__ === Object.prototype);	// true

同样的，Object.prototype 也是一个对象实例。Object.prototype也有__proto__属性，但是它的属性值是 null。这就是原型链的终点。也就是说，Object 原型的原型是 null。

console.log(Object.prototype.__proto__ === null);
3.1.3 同一构造函数的不同实例共享同一原型对象

同一个构造函数创建的两个实例，共享同一原型对象。

function Person() {}
let p1 = new Person();
let p2 = new Person();
console.log(p1.__proto__ === p2.__proto__);		// true
3.1.4 使用 instanceof 检查实例的原型链中是否包含指定构造函数的原型

使用 instanceof 可以检查实例的原型链中是否包含指定构造函数的原型。

// p1 的原型链中包含 Person 构造函数的原型
// 因此 instanceof 操作符返回 true
console.log(p1.__proto__ === Person.prototype);
console.log(p1 instanceof Person);	// true

// p1 的原型链中包含 Object 构造函数的原型
// 因此 instanceof 操作符返回 true
console.log(p1.__proto__.__proto__ === Object.prototype);
console.log(p1 instanceof Object);	// true
3.1.5 注意事项
  1. 原型对象包含 constructor 属性和其它后添加进来的属性。（原型对象的 constructor 属性指回构造函数）
  2. 如果在对象身上没有找某个属性，那么就会去沿着原型链去它的原型中去查找。
3.1.6 isPrototypeOf() 验证实例的原型对象

因为不是所有的实现都对外暴露了[[Prototype]]，因此 ECMAScript 提供了 isPrototypeOf() 方法。

isPrototypeOf() 方法用来验证一个对象是不是实例的原型对象。

// 因为 p1.__proto__ 指向了 Person.prototype，
// 也就是说 Person.prototype 是 p1 的原型对象，
// 因此返回 true。
console.log(Person.prototype.isPrototypeOf(p1));	// true
3.1.7 Object.getPrototypeOf() 返回 [[Prototype]] 的值

因为不是所有的实现都对外暴露了[[Prototype]]，因此 ECMAScript 提供了 Object.getPrototypeOf() 方法。

Object.getPrototypeOf() 方法可以返回参数的内部属性[[Prototype]]的值，也就是浏览器实现的__proto__属性值。

console.log(Object.getPrototypeOf(p1) === p1.__proto__); 	//true

使用 Object.getPrototypeOf() 可以方便地取得一个对象的原型。

3.1.8 Object.setPrototypeOf() 重写实例的原型对象

Object.setPrototypeOf() 方法可以向实例的私有属性[[Prototype]]写入一个新值。这样就可以重写一个对象的原型继承关系。

function Person() {}
const p = new Person();

console.log(Person.prototype.isPrototypeOf(p)); // true

const obj = {};
Object.setPrototypeOf(p, obj);					// 重写实例的原型对象
console.log(Person.prototype.isPrototypeOf(p)); // false
console.log(obj.isPrototypeOf(p));              // true

注意：Object.setPrototypeOf() 严重影响代码性能。

3.1.9 Object.create() 创建新对象并指定原型

为了避免 Object.setPrototypeOf() 造成的性能下降，可以通过 Object.create() 来创建一个新对象，同时指定原型。

const obj = {
  name: "foo",
};

let person = Object.create(obj);
console.log(person.name);				// foo
console.log(person.__proto__ === obj);	// true

3.2 原型层级

在通过对象访问属性时，会从对象实例本身开始搜索。如果在这个实例上发现了给定的属性名，则返回该属性值。如果没有找到这个属性，则搜索会沿着指针进入原型对象，然后在原型对象上找到属性后再返回对应的值。到此，搜索停止，不会再沿着原型链继续搜索。

function Person() {
  this.name = "foo";
}
Person.prototype.age = 18;
const person = new Person();
console.log(person.name);		// 这个属性位于对象实例身上
console.log(person.age);		// 这个属性位于对象原型上
3.2.1 hasOwnProperty() 返回是否为自有属性

hasOwnProperty() 方法用于确定某个属性是在实例上还是在原型对象上。在属性存在于调用它的对象实例上返回 true。

function Person() {
  this.name = "foo";
}
const person = new Person();
console.log(person.hasOwnProperty("name"));	// false
3.2.2 Object.getOwnPropertyDescriptor() 获取属性描述符
function Person() {
  this.name = "foo";
}
const person = new Person();
console.log(Object.getOwnPropertyDescriptor(person, "name"));
// { value: 'foo', writable: true, enumerable: true, configurable: true }

Object.getOwnPropertyDescriptor() 方法只对实例身上的属性有效。要取得原型属性的描述符，就必须在原型对象上调用Object.getOwnPropertyDescriptor()。

3.3 原型和 in 操作符

有两种方法使用 in 操作符：单独使用和在 for-in 循环中使用。

3.3.1 单独使用 in 操作符

单独使用时，in 操作符会在可以通过对象访问指定属性时返回 true，无论该属性是在实例上还是在原型上。

function Person() {
  this.name = "foo";
}
Person.prototype.age = 18;
const person = new Person();
console.log("name" in person);		// 属性在实例上
console.log("age" in person);		// 属性在原型上

可以使用 in 操作符和 hasOwnProperty() 可以确定一个属性是否在原型上。如果一个属性可以通过 in 操作符返回 true，并且 hasOwnProperty() 返回 false，那么这个属性就在原型上。

function Person() {}
Person.prototype.age = 18;
const person = new Person();

// 属性在原型上
console.log("age" in person && !person.hasOwnProperty("age"));	// true
3.3.2 在 for-in 循环中使用 in 操作
返回实例身上和原型身上的可枚举属性

在 for-in 循环中使用 in 操作符时，可以通过对象访问且可以被枚举的属性都会被返回，包括实例属性和原型属性。

function Person() {
  this.name = "foo";
}
Person.prototype.age = 18;
const p = new Person();
for (const key in p) {
  console.log(key, p[key]);		// [ 'name' ]
}
Object.keys() 只返回实例身上的可枚举属性

要想获得实例身上所有的有可枚举属性，而不带上原型身上的可枚举属性，可以使用 Object.keys() 方法。这个方法接收一个对象作为参数，返回对象身上所有的可枚举属性名组成的数组。

function Person() {
  this.name = "foo";
}
Person.prototype.age = 18;
const p = new Person();
p.addr = "bar";
console.log(Object.keys(p));	// [ 'name', 'addr' ]
Object.getOwnPropertyNames() 返回实例身上所有属性，无论是否可枚举

如果想列出实例身上所有的属性，无论是否可枚举，可以使用 Object.getOwnPropertyNames()。

function Person() {
  this.name = "foo";
}
Person.prototype.age = 18;
const p = new Person();
console.log(Object.getOwnPropertyNames(p.__proto__));
// [ 'constructor', 'age' ]
// p.__proto__ 身上的不可枚举属性 constructor 也被列举出来了
Object.getOwnPropertySymbols() 返回实例身上的符号属性
const obj = {
  [Symbol("foo")]: "foo",
  [Symbol("bar")]: "bar",
};
console.log(Object.getOwnPropertySymbols(obj));
// [ Symbol(foo), Symbol(bar) ]

3.4 枚举属性顺序

枚举顺序不确定的方法：

for-in 循环、Object.keys() 枚举的顺序不确定。

枚举顺序确定的方法：

Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()、Object.assign() 的顺序是确定的。先以升序枚举数值键，然后以插入顺序枚举字符串和符号键。对象字面量定义的键以它们逗号分隔的顺序插入。

3.4 对象迭代

ECMAScript 2017 中新增了两个静态方法，用于将对象内容转化为序列化的、可迭代的格式。Object.values() 和 Object.entires() 接收一个对象，返回一个数组。Object.values() 返回对象值的数组，Object.entires() 返回键值对的数组。这两个方法都只会返回对象实例身上的属性，不会返回原型对象身上的属性。

function Person() {
  this.name = "foo";
}
Person.prototype.age = 18;
const p = new Person();
p.addr = "bar";
console.log(Object.values(p));		// [ 'foo', 'bar' ]
console.log(Object.entries(p));		// [ [ 'name', 'foo' ], [ 'addr', 'bar' ] ]

3.5 对象字面量重写原型

3.5.1 使用对象字面量重写原型

为了减少冗余和从视觉上更好地封装原型功能，可以使用对象字面量来重写原型。

function Person() {}
Person.prototype = {
  name: "foo",
  addr: "bar",
  age: 18,
};
3.5.2 重写原型带来的 constructor 问题

这样重写之后 Person.prototype 之后，Person.prototype 的 constructor 属性不再指向 Perosn 构造函数。而是沿着原型链找到 Person.prototype.proto.constructor 也就是 Object 构造函数。

console.log(Person.prototype.constructor === Person.prototype.__proto__.constructor);

虽然此时 instanceof 操作符还能可靠地返回值，但是已经不能依靠 constructor 属性来识别类型了。

function Person() {}
Person.prototype = {
  name: "foo",
  addr: "bar",
  age: 18,
};
const p = new Person();
console.log(p.__proto__ === Person.prototype); 	// true
console.log(p instanceof Person); 				// true
console.log(p.__proto__.constructor);			// [Function: Object]
3.5.3 重写 constructor

如果 constructor 的值非常重要，可以在重写原型时同时指定 constructor。

function Person() {}

Person.prototype = {
  constructor: Person,	// 重写原型时指定 constructor
  name: "foo",
  addr: "bar",
  age: 18,
};

此时的 constructor 属性是可枚举的，如果想让 constructor 恢复成原生的不可枚举的属性，可以使用Object.defineProperty()。

function Person() {}

Person.prototype = {
  name: "foo",
  addr: "bar",
  age: 18,
};

Object.defineProperty(Person.prototype, "constructor", {
  enumerable: false,
  value: Person,
});

3.6 原型的动态性

虽然，随时能给原型添加属性和方法，并能够立即反映在所有对象实例上，但这和重写这个原型对象是两码事。实例的[[Prototype]]指针是在调用构造函数时自动赋值的，这个指针即使把原型修改为不同的对象也不会变。

重写整个原型会切断最初原型和构造函数之间的关系，但实例引用的还是最初的原型。

function Person() {}
const p = new Person();
Person.prototype = {
  name: "foo",
};
console.log(p.name);		// undefined

重写构造函数上的原型之后创建的实才会引用新的原型。而在此之前创建的实例仍然会引用最初的原型。

3.7 原生对象原型

原型模式之索引重要，不仅体现在自定义类型上，而且因为它也是实现所有原生引用类型的模式。所有原生引用类型的构造函数（比如：Object、Array、String 等）都在原型上定义了实例方法。

console.log(Array.prototype.sort);			// [Function: sort]
console.log(String.prototype.substring);	// [Function: substring]

通过原生对象的模型可以取得所有默认方法的引用，也可以给原生实例定义新的方法（但不建议这样做）。

Tourry
关注
原型的概念，原型的对象，对象的方法和原型的使用方法
zy的博客
03-13 914
原型对象是什么的概述和对象的分类和原型现在和过去的使用方法
创建一个对象的方法及原型对象
L_SS133的博客
08-20 893
一、创建一个对象的方法 1.工厂模式      在函数中创建对象，并给这个对象添加属性，然后在这个函数中返回这个对象。在函数外部调用这个函数来创建对象的实例。 function createPerson(name,age,job){ var o=new Object();//在函数内部创建一个对象 o.name=name; o.age=age; o.job=job;...
JavaScript-笔记7
wsssq_的博客
01-13 182
this、批量创建对象、构造函数、原型、垃圾回收
JS-面向对象（构造函数、原型）
itsNekoDeng的博客
10-31 178
什么是面向对象？ 对象是类的实例，类是对象的抽象 对象的本质：属性和方法的集合 学过的对象 Array、String、Math、Date … 创建对象的方式： 1、字面量 var obj = {} 2、通过new运算符 var obj = new Object() 3.构造函数 用来构造（创建）对象的函数 他在声明的时候跟普通函数没有区别 用new运算符加上函数的调用，调用的结果就是一个对象 构造函数中的this指的是即将要new的那个对象 构造函数就是封装一个函数,可以用来通过new的方式得到一系列特征相
对象的结构、原型、原型的作用、修改原型、instanceof和hasOwn、旧类、new运算符、对象总结——JS面向对象
weixin_70320000的博客
11-17 479
对象的结构、原型、原型的作用、修改原型、instanceof和hasOwn、旧类、new运算符、对象总结
深入理解javascript构造函数和原型对象
10-25
在深入理解JavaScript的过程中，构造函数和原型对象是两个核心概念。JavaScript是一种基于对象（Object-based）和原型（Prototype-based）的语言，其对象模型与传统的基于类（Class-based）语言有所不同。理解构造...
JavaScript原型对象、构造函数和实例对象功能与用法详解
12-11
本文实例讲述了JavaScript原型对象、构造函数和实例对象功能与用法。分享给大家供大家参考，具体如下： 大家都知道，javascript中其实并没有类的概念。但是，用构造函数跟原型对象却可以模拟类的实现。在这里，就先...
js代码-构造函数+原型对象的继承
07-16
在JavaScript中，构造函数和原型对象的继承是实现面向对象编程的重要机制。JavaScript是一种基于原型的语言，这意味着对象可以直接从其他对象继承属性和方法。这里我们将深入探讨这两种概念以及它们如何协同工作来...
原型模式配合构造函数的组合模式创建自定义类型
sadasddpk的博客
09-02 146
1.原型模式 在原型对象上面定义的属性和方法可以被对象实例共享。原来在构造函数中直接赋给对象实例的值，可以直接赋值给它们的原型。 function Person(){} Person.prototype.name = 'kunkun' Person.prototype.age = 19 Person.prototype.gender = 'male' Person.prototype.sayName = function () { console.log(this.name); }; var
javascript面试题(持续更新)
最新发布
ispaomoya博客
02-07 1447
javascript面试题，主要有javascript基础，原型，对象，promsie，es6+等
javascript高级程序设计---6面向对象的程序设计
深蓝旭的博客
02-13 118
创建对象 1、工厂模式 ECMAScript中无法创建类，所以用函数来封装以特定接口创建对象的细节。 function createPerson (name: string, age: number, job: string) { const o: any = new Object(); o.name = name; o.age = age; o.job = job; o.sa...
Javascript对象的创建
Hoshizola的博客
03-16 119
一、创建对象的模式 虽然使用Object构造函数或者对象字面量可以方便地创建对象，但这种方式的不足是具有同样接口的多个对象需要重复编写很多代码。 工厂模式 按照特定接口创建对象的方式： function createPerson(name, age, gender) { let obj = new Object() obj.name = name obj.age = age obj.gender = gender obj.sayName = function () { conso
【axios源码】- 工具函数utils研读解析
bierxiensi的博客
01-24 983
首发于我的blog - 大前端工程师成长路线 - Axios工具函数 一、环境准备 axios 版本 v0.24.0 通过 github1s 网页可以 查看 axios源码 调试需要 clone 到本地 git clone https://github.com/axios/axios.git cd axios npm start http://localhost:3000/ 二、函数研读 utils is a library of generic helper function.
构造函数与原型对象
syy的博客
11-15 894
构造函数与原型对象、this指向以及错误处理和查找算法
Object原型对象的方法
不能再菜
08-11 1799
记录JS中Object不常用的方法和属性Object.getPrototypeOf()（查看对象原型）Object.setPrototypeOf()（修改对象原型）使用new来模仿Object.setPrototypeOf()Object.create()（通过原型创建实例对象）javascriptObject.prototype.isPrototypeOf()（判断是否在参数对象的原型链上）isPrototypeOf和instanceof 的区别Object.prototype.__proto__ （返回
javascript学习——创建对象
u013237862的博客
05-17 227
总结了创造实例时的几种方法，没有记录寄生构造函数模式和稳妥构造函数模式
封装一个函数，获取对象的特定层级的数据。
congxue666的博客
02-19 319
let item = { id: '1', children: [ { id: '2', children: [{ id: '2-1' ,children:[{id: '2-1-1',children:[{id: '2-1-1-1',children:[]}]}]}]}, { id: '3', children: [{ id: '3-1' ,children:[]}]}, .
Js中判断一个属性是属于原型函数还是实例属性的方法
洛神赋
07-23 2031
  /** * * 检测一个属性是实例属性还是原型属性 * 检测完成以后，再来作操作 * */ function Person(password) { this.password = password; } Person.prototype.username = 'luohao'; let person = new Person(123); /** * 可以访...
JavaScript对象创建：构造函数与原型对象深度解析
"本文深入探讨JavaScript中的构造函数和原型对象，讲解了常见的对象创建模式，包括使用`new`关键字创建、使用对象字面量创建、工厂模式以及构造函数模式。" 在JavaScript中，对象的创建有多种方式。首先，最基本的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值