__proto__属性,Object.setPrototypeOf(),Object.getPrototypeOf()

JavaScript 语言的对象继承是通过原型链实现的。ES6 提供了更多原型对象的操作方法。

__proto__属性

__proto__属性(前后各两个下划线),用来读取或设置当前对象的prototype对象。目前,所有浏览器(包括 IE11)都部署了这个属性。

  1. // es6 的写法
  2. const obj = {
  3. method: function() { ... }
  4. };
  5. obj.__proto__ = someOtherObj;
  6. // es5 的写法
  7. var obj = Object.create(someOtherObj);
  8. obj.method = function() { ... };

该属性没有写入 ES6 的正文,而是写入了附录,原因是__proto__前后的双下划线,说明它本质上是一个内部属性,而不是一个正式的对外的 API,只是由于浏览器广泛支持,才被加入了 ES6。标准明确规定,只有浏览器必须部署这个属性,其他运行环境不一定需要部署,而且新的代码最好认为这个属性是不存在的。因此,无论从语义的角度,还是从兼容性的角度,都不要使用这个属性,而是使用下面的Object.setPrototypeOf()(写操作)、Object.getPrototypeOf()(读操作)、Object.create()(生成操作)代替。

实现上,__proto__调用的是Object.prototype.__proto__,具体实现如下。

  1. Object.defineProperty(Object.prototype, '__proto__', {
  2. get() {
  3. let _thisObj = Object(this);
  4. return Object.getPrototypeOf(_thisObj);
  5. },
  6. set(proto) {
  7. if (this === undefined || this === null) {
  8. throw new TypeError();
  9. }
  10. if (!isObject(this)) {
  11. return undefined;
  12. }
  13. if (!isObject(proto)) {
  14. return undefined;
  15. }
  16. let status = Reflect.setPrototypeOf(this, proto);
  17. if (!status) {
  18. throw new TypeError();
  19. }
  20. },
  21. });
  22. function isObject(value) {
  23. return Object(value) === value;
  24. }

如果一个对象本身部署了__proto__属性,该属性的值就是对象的原型。

  1. Object.getPrototypeOf({ __proto__: null })
  2. // null

Object.setPrototypeOf()

Object.setPrototypeOf()方法的作用与__proto__相同,用来设置一个对象的prototype对象,返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法。

  1. // 格式
  2. Object.setPrototypeOf(object, prototype)
  3. // 用法
  4. const o = Object.setPrototypeOf({}, null);

该方法等同于下面的函数。

  1. function (obj, proto) {
  2. obj.__proto__ = proto;
  3. return obj;
  4. }

下面是一个例子。

  1. let proto = {};
  2. let obj = { x: 10 };
  3. Object.setPrototypeOf(obj, proto);
  4. proto.y = 20;
  5. proto.z = 40;
  6. obj.x // 10
  7. obj.y // 20
  8. obj.z // 40

上面代码将proto对象设为obj对象的原型,所以从obj对象可以读取proto对象的属性。

如果第一个参数不是对象,会自动转为对象。但是由于返回的还是第一个参数,所以这个操作不会产生任何效果。

  1. Object.setPrototypeOf(1, {}) === 1 // true
  2. Object.setPrototypeOf('foo', {}) === 'foo' // true
  3. Object.setPrototypeOf(true, {}) === true // true

由于undefinednull无法转为对象,所以如果第一个参数是undefinednull,就会报错。

  1. Object.setPrototypeOf(undefined, {})
  2. // TypeError: Object.setPrototypeOf called on null or undefined
  3. Object.setPrototypeOf(null, {})
  4. // TypeError: Object.setPrototypeOf called on null or undefined

Object.getPrototypeOf()

该方法与Object.setPrototypeOf()方法配套,用于读取一个对象的原型对象。

  1. Object.getPrototypeOf(obj);

下面是一个例子。

  1. function Rectangle() {
  2. // ...
  3. }
  4. const rec = new Rectangle();
  5. Object.getPrototypeOf(rec) === Rectangle.prototype
  6. // true
  7. Object.setPrototypeOf(rec, Object.prototype);
  8. Object.getPrototypeOf(rec) === Rectangle.prototype
  9. // false

如果参数不是对象,会被自动转为对象。

  1. // 等同于 Object.getPrototypeOf(Number(1))
  2. Object.getPrototypeOf(1)
  3. // Number {[[PrimitiveValue]]: 0}
  4. // 等同于 Object.getPrototypeOf(String('foo'))
  5. Object.getPrototypeOf('foo')
  6. // String {length: 0, [[PrimitiveValue]]: ""}
  7. // 等同于 Object.getPrototypeOf(Boolean(true))
  8. Object.getPrototypeOf(true)
  9. // Boolean {[[PrimitiveValue]]: false}
  10. Object.getPrototypeOf(1) === Number.prototype // true
  11. Object.getPrototypeOf('foo') === String.prototype // true
  12. Object.getPrototypeOf(true) === Boolean.prototype // true

如果参数是undefinednull,它们无法转为对象,所以会报错。

  1. Object.getPrototypeOf(null)
  2. // TypeError: Cannot convert undefined or null to object
  3. Object.getPrototypeOf(undefined)
  4. // TypeError: Cannot convert undefined or null to object

es6 __proto__属性,Object.setPrototypeOf(),Object.getPrototypeOf()相关推荐

  1. es6 prototype 属性和__proto__属性

    prototype 属性和__proto__属性 大多数浏览器的 ES5 实现之中,每一个对象都有__proto__属性,指向对应的构造函数的prototype属性.ES6 Class 作为构造函数的 ...

  2. Object.setPrototypeOf 与 Object.create() 的区别

    在讲之前,我们先回顾下创建对象的几种方式,并且Object.new Object() 和 Object.create 的区别 ①:字面量方式创建对象 let person = {name: 'nick ...

  3. ECMA262 Edition5 Object,Object的属性和方法,Object.prototype的方法.

    ES5,为Object添加了一批方法.了解这些方法,可以更好的理解属性描述符的应用. 所以还是很有必要读一读的.另外,这些方法用起来还是蛮给力的. 暂时对于ES5,就只放出这些吧,希望对大家有所帮助. ...

  4. js学习日记-new Object和Object.create到底干了啥

    function Car () {this.color = "red"; } Car.prototype.sayHi=function(){console.log('你好') }v ...

  5. JS中关于构造函数、原型链、prototype、constructor、instanceof、__proto__属性

    在Javascript不存在类(Class)的概念,javascript中不是基于类的,而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中引入 ...

  6. JS中函数的prototype属性和对象的__proto__属性

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  7. 【js基础】理清Object、Object.prototype、Function、Function.prototype

    Object.prototype.toString.call(something) 上面这段代码一般被用来判断变量的类型,相信很多人都非常熟悉 今天coding时用到上面这段代码,突然想到 Objec ...

  8. ES6 计算属性名快速上手

    1. ES6 计算属性名 ES6 中引入了计算属性名,英文是 computed property names,它可以在对象字面量中动态计算属性名称. 我们知道添加或修改对象的属性有两种常用的方法,一种 ...

  9. new Object()和Object.create()的区别

    Object.create() 创建一个新对象,使用现有的对象来提供新创建的对象的__proto__. --MDN 语法 Object.create(proto, [propertiesObject] ...

最新文章

  1. Weblogic 10.3.6 for linux 集群安装
  2. qt5 + vs2015自定义控件错误:undefend interface
  3. 2019年的前端学习计划
  4. 【算法竞赛学习】二手车交易价格预测-Task1赛题理解
  5. Android 4.2 通知通过PendingIntent启动Activity失败的问题
  6. text/html与text/plain的区别
  7. java类无法调用值,Kotlin无法调用到Java中定义的interface类的问题记录
  8. mysql服务的注册,启动、停止、注销。 [delphi代码实现]
  9. CNN_原理以及pytorch多分类实践
  10. 黑苹果alc269声卡仿冒id_黑苹果定制声卡驱动(ALC892为例)
  11. Static Single Assignment(SSA)
  12. 计算机毕设存档袋子,关于做好2018届毕业论文(设计)材料整理存档的通知
  13. 配对交易之统计套利配对:介绍
  14. J2EE--自定义mvc增删改查
  15. Javascript实现全屏阅读和复制功能
  16. 基于eNSP的企业PON入云网络模拟
  17. 工业4.0 资产管理壳学习笔记(1)
  18. 华信mysql数据恢复_华信安卓手机数据恢复程序3.0
  19. Java静态编译技术:突破Java“冷启动”桎梏,实现启动性能“质”的飞跃
  20. 甲骨文高管薪酬去年骤降 董事长埃利森少拿35%

热门文章

  1. 《BackTrack 5 Cookbook中文版——渗透测试实用技巧荟萃》—第1章1.3节安装BackTrack到USB驱动器...
  2. 2015年关注的技术书籍
  3. Java虚拟机-逃逸分析(Escape Analysis)和栈上分配
  4. 地府后台管理系统30.已经在开发中,介绍下目前的工作进度和未来展望
  5. 基于生成对抗的知识图谱零样本关系学习 AAAI2020
  6. yum 安装boost
  7. Asia Yokohama Regional Contest 2018 K题 - Sixth Sense(思维加贪心加二分)
  8. DOM中对表格的操作
  9. BZOJ1041:[HAOI2008]圆上的整点(数论)
  10. CentOS 6.8 安装JDK8