js 原型与原型链

weixin79893765432...

已于 2023-07-20 08:54:55 修改

阅读量370

点赞数 1

分类专栏： JavaScript 文章标签： JS原型 JS原型链

于 2020-11-14 09:52:49 首次发布

本文链接：https://blog.csdn.net/mChales_Liu/article/details/109686177

版权

JavaScript 专栏收录该内容

84 篇文章 6 订阅

订阅专栏

一、原型

1、原型对象

（1）、new 一个实例对象时发生了什么？

三、ES6 中 class 继承后的原型链

四、原型链与作用域链的区分

五、js 提供的读写原型链的部分方法

1、Object.defineProperty() 和 Object.defineProperties()

（1）、Object.getPrototypeOf(Object) 不是 Object.prototype

3、Object.prototype.hasOwnProperty()

4、Object.prototype.isPrototypeOf()

5、Object.getOwnPropertyNames()

六、推荐阅读

一、原型

JS 的原型分为：

显式原型（prototype）：函数的属性。
隐式原型（__proto__）：引用类型数据的属性。

【拓展】

引用类型：Object、Array、Function、Date、RegExp。

1、原型对象

原型对象是构造函数的 prototype 对象，用来存放实例对象的公有属性和公有方法。

构造函数是使用了 new 关键字的函数，用来创建实例对象。

构造函数、原型对象和实例对象的关系：

每个构造函数都有一个 prototype 原型对象。
prototype 原型对象里的 constructor 指向构造函数本身
通过 new 一个构造函数可以创建一个引用类型的实例对象。
每个引用类型的实例对象都有一个 __proto__ 属性指向它构造函数的 prototype 原型对象。

例如：

// 创建一个构造函数
function Person (name, age) {
    this.name = name
    this.age = age
}

console.log(Person.prototype) // Person 的原型对象：{constructor: ƒ}
console.log(Person.prototype.constructor) // 构造函数：Person()

// 创建一个该构造函数的实例对象
const per1 = new Person('张三', 18)

console.log(per1.__proto__) // Person 的原型对象：{constructor: ƒ}
console.log(per1.constructor) // 构造函数：Person()

（1）、new 一个实例对象时发生了什么？

第一步：创建一个空对象。
第二步：将新对象的原型链隐式地指向构造函数的原型对象。
第三步：重新绑定 this，使构造函数的 this 指向新对象。
第四步：执行构造函数中的代码，为这个新对象添加属性和方法。
第五步：返回新对象（构造函数默认会执行 return this）。

二、原型链

原型链：又叫 隐式原型链，是由 __proto__ 属性串联起来，原型链的尽头是 Object.prototype，Object.prototype 始终指向的是 null。

1、当访问一个对象的属性时发生了什么？

简而言之，访问一个对象的属性时，先在自身属性中查找，找到返回；如果没有，再沿着 __proto__ 这条链向上查找，找到返回；如果最终没找到，返回 undefined。

具体分析如下：

访问一个对象的属性时，先在自身属性中查找，如果没有找到，则会去它的 __proto__ 隐式原型上查找，即它的构造函数的 prototype，如果还没有找到，就会再在构造函数的 prototype 的 __proto__ 中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。如果查找至 Object.prototype 依然没有找到，由于 Object.prototype 始终指向的是 null，所以再向外就没有东西可找了，因此最终会返回 undefined。

例如：

function Person(name) {
  this.name = name
}

var per1 = new Person('张三')
console.log(per1.toString()) // '[object Object]'
console.log(per1.address) // undefined

按理说， per1 是 Person 构造函数生成的实例，而 Person 的 prototype 并没有 toString 方法，那么为什么， per1 能获取到 toString 方法？

这里就引出原型链的概念了， per1 实例先在自身属性中查找，发现并没有 toString 方法。再沿着 __proto__ 这条链向上查找：

先找 per1.__proto__（即 Person 构造函数的 prototype 属性），没有 toString 方法。
再向上找 per1.__proto__.__proto__（即 Object 构造函数的 prototype 属性），找到了 toString 方法。

若访问的属性是一个在对象自身及其原型链上都不存在的属性，会返回 undefined。这是为什么呢？

像访问 toString 时那样，访问 address 时，也会先在自身属性中查找，发现并没有 address 属性。再沿着 __proto__ 这条链向上查找：

先找 per1.__proto__（即 Person 构造函数的 prototype 属性），没有 address 属性。
再向上找 per1.__proto__.__proto__（即 Object 构造函数的 prototype 属性），没有 address 属性。
再向上找是 Object.prototype.__proto__，因为 Object.prototype 的__proto__永远指向的时是 null。所以没有找到，最终返回 undefined。

2、实例对象的原型链

所有对象都是 Object() 的实例。

例如：

// 创建一个构造函数
function Person (name, age) {
    this.name = name
    this.age = age
}

// 创建一个该构造函数的实例对象
const per1 = new Person('张三', 18)

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

3、构造函数的原型链

所有函数都是 Function() 的实例。

例如：

// 创建一个构造函数
function Person (name, age) {
    this.name = name
    this.age = age
}

// 创建一个该构造函数的实例对象
const per1 = new Person('张三', 18)

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


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

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

console.log(Person.constructor === Function); // true
console.log(Object.constructor === Function); // true
console.log(Function.constructor === Function); // true

三、ES6 中 class 继承后的原型链

通过 ES6 的方式，Sub.__proto__ === Super，子类可以直接通过 __proto__ 寻址到父类。

通过 ES5 的方式，Sub.__proto__ === Function.prototype。

// ES6
class Super {}
class Sub extends Super {}

const sub = new Sub();

Sub.__proto__ === Super;

// ES5
function Super() {}
function Sub() {}

Sub.prototype = new Super();
Sub.prototype.constructor = Sub;

var sub = new Sub();

Sub.__proto__ === Function.prototype;

四、原型链与作用域链的区分

原型链与作用域链没关系。

js 环境 & 作用域 & 作用域链 & 提升https://blog.csdn.net/mChales_Liu/article/details/103189065

五、js 提供的读写原型链的部分方法

1、Object.defineProperty() 和 Object.defineProperties()

JS Object.defineProperty如何精确添加或修改对象的属性呢？就用Object.defineProperty。目录一、语法二、属性1、javaScript 的三种属性2、Object.defineProperty()的属性（1）、数据描述符和存取描述符都可以选择的键值（configurable,enumerable）（2）、仅数据描述符可选键值（value,writable）（3）、...https://blog.csdn.net/mChales_Liu/article/details/101758173Object.defineProperty() 和 Object.defineProperties() 都是用来：在一个对象上定义新的属性或修改现有属性，并返回该对象。只不过前者只能一次定义一个属性，后者可以一次定义多个属性。

语法：

//obj：要定义属性的对象。
//prop：要定义或修改的属性的名称或 Symbol 。
//descriptor：要定义或修改的属性描述符。
Object.defineProperty(obj, prop, descriptor)

//obj：在其上定义或修改属性的对象。
//props：要定义其可枚举属性或修改的属性描述符的对象。
Object.defineProperties(obj, props)

例如：

var obj = {};
Object.defineProperties(obj, {
  'property1': {
    value: true,
    writable: true
  },
  'property2': {
    value: 'Hello',
    writable: false
  }
});

2、Object.setPrototypeOf() 和 Object.getPrototypeOf()

Object.setPrototypeOf()：该方法方法设置一个指定的对象的原型 ( 即：内部 [[Prototype]] 属性）到另一个对象或 null。
Object.getPrototypeOf()：该方法返回指定对象的原型对象。如果没有继承属性，则返回 null。

语法：

Object.setPrototypeOf(obj, prototype)

Object.getPrototypeOf(object)

obj：要设置其原型的对象。
prototype：该对象的新原型(一个对象或 null)。

更改对象的 [[Prototype]] 在浏览器和 JavaScript 引擎上都是一个很慢的操作，如果你关心性能，你应该避免设置一个对象的 [[Prototype]]。你可以使用 Object.create() 来创建带有你想要的 [[Prototype]] 的新对象，来避免更改 [[Prototype]。

（1）、Object.getPrototypeOf(Object) 不是 Object.prototype

Object.getPrototypeOf( Object ) 是把 Object 这一构造函数看作对象，返回的是函数对象的原型，也就是 Function.prototype。

var obj = new Object();
 
Object.getPrototypeOf( Object );               // ƒ () { [native code] }
Object.getPrototypeOf( Function );             // ƒ () { [native code] }
 
Object.getPrototypeOf( Object ) === Function.prototype;        // true
Object.prototype是构造出来的对象的原型。
var obj = new Object();
Object.prototype === Object.getPrototypeOf( obj );              // true
 
Object.prototype === Object.getPrototypeOf( {} );               // true

3、Object.prototype.hasOwnProperty()

该方法返回一个布尔值，表示某个对象是否含有指定的属性，而且此属性非原型链继承的。

obj.hasOwnProperty(prop)

prop：要检测的属性的 String 字符串形式表示的名称，或者 Symbol。

即使属性的值是 null 或 undefined，只要属性存在，hasOwnProperty 依旧会返回 true。

var o = new Object();
o.propOne = null;
o.hasOwnProperty('propOne'); // 返回 true
o.propTwo = undefined;
o.hasOwnProperty('propTwo'); // 返回 true

4、Object.prototype.isPrototypeOf()

返回一个布尔值，表示指定的对象是否在本对象的原型链中。

prototypeObj.isPrototypeOf(object)

如果 prototypeObj 为 undefined 或 null，会抛出 TypeError。

5、Object.getOwnPropertyNames()

Object.getOwnPropertyNames(obj)

该方法返回一个数组，它包含了指定对象所有的可枚举或不可枚举的属性名（但不包括 Symbol 值作为名称的属性名）。

获取一个对象的非Symbol的所有属性：使用 Object.getOwnPropertyNames 方法。
只获取可枚举属性：查看 Object.keys 或用 for...in 循环（还会获取到原型链上的可枚举属性，不过可以使用 hasOwnProperty() 方法过滤掉）。
只获取不可枚举的属性：使用 Array.prototype.filter() 方法，从所有的属性名数组（使用Object.getOwnPropertyNames()方法获得）中去除可枚举的属性（使用Object.keys()方法获得），剩余的属性便是不可枚举的属性了。

js 引用类型目录前言：引用类型包括哪些？一、Object类型1、Object实例的创建方式（1）、Object 构造函数法（2）、对象字面量表示法（广泛使用）2、对象字面量可以传递可选参数3、访问对象属性的两种方法（1）、点表示法（2）、方括号表示法4、如何将两个字符串以“key: value”的格式放进一个对象里？二、Array类型1、js数组的特点2、..._js 引用类型https://blog.csdn.net/mChales_Liu/article/details/103201171

【本文参考】

【原型和原型链】什么是原型和原型链

原型和原型链

面不面试的，你都得懂原型和原型链

说说原型（prototype）、原型链和原型继承

weixin79893765432...

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
js 原型与原型链

一、原型所有引用类型都有一个 __proto__（隐式原型）属性，指向它构造函数的 prototype 属性。所有函数都有一个 prototype（原型）属性，属性值是一个普通的对象。var a = [1,2,3];a.__proto__ === Array.prototype; // truefunction Func () {};var f = new Func();f.__proto__===Func.prototype; // truevar fn = function (
复制链接

扫一扫

专栏目录