JS的原型和继承

__proto__

nullundefined,JS中的所有数据类型都有这个属性; 它表示当我们访问一个对象的某个属性时,如果该对象自身不存在该属性, 就从它的__proto__属性上继续查找,以此类推,直到找到,若找到最后还是没有找到,则结果为undefined

我们把一个对象的__proto__属性所指向的对象叫该对象的原型;我们可以修改一个对象的原型来让这个对象拥有某种属性或某个方法

// 修改一个Number类型的值的原型const num = 1;num.__proto__.name = "My name is 1";console.log(num.name); // My name is 1// 修改一个对象的原型const obj = {};obj.__proto__.name = "dreamapple";console.log(obj.name); // dreamapple

需注意的是,__proto__属性虽多数浏览器支持,但其实它仅在ECMAScript 2015规范中才被准确定义, 目的是为了给这个传统的功能定制一个标准,以确保浏览器间的兼容性。通过使用__proto__属性来修改一个对象的原型非常慢且影响性能。 所以,若想获取一个对象的原型,推荐用Object.getPrototypeOf 或Reflect.getPrototypeOf,设置一个对象的原型推荐用Object.setPrototypeOfReflect.setPrototypeOf

prototype

首先要记住的是,该属性一般只存在于函数对象上; 只要是能作为构造器的函数,都包含这个属性。即只要这个函数能通过new生成一个新对象, 那么这个函数肯定具有prototype属性。因为我们自定义的函数都可通过new生成一个对象,所以我们自定义的函数都有prototype 这个属性

// 函数字面量console.log((function(){}).prototype); // {constructor: ƒ}// Date构造器console.log(Date.prototype); // {constructor: ƒ, toString: ƒ, toDateString: ƒ, toTimeString: ƒ, toISOString: ƒ, …}// Math.abs 不是构造器,不能通过new操作符生成一个新的对象,所以不含有prototype属性console.log(Math.abs.prototype); // undefined

prototype属性有什么作用呢?作用就是:函数通过new生成的一个对象, 这个对象的原型(__proto__)指向该函数的prototype属性:

// 其中F表示一个自定义的函数或者是含有prototype属性的内置函数new F().__proto__ === F.prototype // true// 通过函数字面量定义的函数的__proto__属性都指向Function.prototype(function(){}).__proto__ === Function.prototype // true// 通过对象字面量定义的对象的__proto__属性都是指向Object.prototype({}).__proto__ === Object.prototype // true// Object函数的原型的__proto__属性指向nullObject.prototype.__proto__ === null // true// 因为Function本身也是一个函数,所以Function函数的__proto__属性指向它自身的prototypeFunction.__proto__ === Function.prototype // true// 因为Function的prototype是一个对象,所以Function.prototype的__proto__属性指向Object.prototypeFunction.prototype.__proto__ === Object.prototype // true

constructor

constructor表示一个对象的构造函数,除nullundefined,JS中的所有数据类型都有这个属性; 我们可通过下面的代码来验证一下:

null.constructor // Uncaught TypeError: Cannot read property 'constructor' of null ...undefined.constructor // Uncaught TypeError: Cannot read property 'constructor' of undefined ...(true).constructor // ƒ Boolean() { [native code] }(1).constructor // ƒ Number() { [native code] }"hello".constructor // ƒ String() { [native code] }

一个对象的constructor属性确切地说并不是存在这个对象上面的; 而是存在这个对象的原型上(如果是多级继承需手动修改原型的constructor属性),我们可用下面的代码来解释一下:

const F = function() {};// 当我们定义一个函数的时候,这个函数的prototype属性上面的constructor属性指向自己本身F.prototype.constructor === F; // true

对JS的原始类型(stringnumberbooleannullundefinedsymbol (new in ECMAScript 2015)),它们的constructor属性是只读的,不可修改:

(1).constructor = "something";console.log((1).constructor); // 输出 ƒ Number() { [native code] }

如果真想改这些原始类型的constructor属性,也不是不可以:

Number.prototype.constructor = "number constructor";(1).constructor = 1;console.log((1).constructor); // 输出 number constructor

当然上面的方式不推荐

(0)

相关推荐

  • 什么是原型链

    对象原型 相信大家都这样用过 map : let arr = [0, 1, 2]let doubleArr = arr.map(c => c * 2)console.log(doubleArr) ...

  • JavaScript中的原型prototype和

    问题 初学js的同学,总是搞不清楚js中的原型是什么东西,看着控制台打印出来的一串串__proto__,迷惑不已. 例如我定义一个Person,创建一个实例p,并打印实例. function Pers ...

  • 诚之和:如何掌握前端JavaScript中的class类

    本篇内容主要讲解"如何掌握前端JavaScript中的class类",感兴趣的朋友不妨来看看.本文介绍的方法操作简单快捷,实用性强.下面就让小编来带大家学习"如何掌握前端 ...

  • js原型原型链

    一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object .Function 是 JS 自带的函数对象. o1 o2 o3 为普通对象, ...

  • [js] 第108天 请描述下js的原型和原型链的理解以及它们之间的关系

    今日试题: 请描述下js的原型和原型链的理解以及它们之间的关系 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多次反省自 ...

  • (4条消息) 阐述JS中原型链及prototype和

    在开始先给出我在知乎上看到的一张图,可以帮助理解: 如果现在你还不能很好的理解这副图的意思,那请继续往下看. 一.prototype和 _proto_ 的概念 prototype是函数的一个属性(每个 ...

  • [js] 第109天 请描述下什么是原型模式?它主要运用在哪些场景?

    今日试题: 请描述下什么是原型模式?它主要运用在哪些场景? 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多次反省自己) ...

  • [js] 第83天 举例说明js如何实现继承?

    今日试题: 举例说明js如何实现继承? 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多次反省自己). 前端面试每日3+ ...

  • 干货 | 快速读懂 JS 原型链

    OSC开源社区 昨天 以下文章来源于前端日志 ,作者前端日志 前端日志前端一二线大厂日常工作.技术分享.实战总结. 最近参加了公司内部技术分享,分享同学提到了 Js 原型链的问题,并从 V8 的视角展 ...

  • 最详尽的 JS 原型与原型链终极详解

    最详尽的 JS 原型与原型链终极详解 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object ,Function 是 JS 自带的函数 ...

  • JS中构造函数的方法定义在原型对象里

    构造函数中的方法每当new一个对象的时候,就会创建一个构造函数里的方法,如果多个实例对象就会创建多个方法,占用内存,没有提高代码的复用性: 将方法定义到构造函数的原型对象里,创建多个实例对象而共享一个 ...

  • JS基础知识理解之一: 原型链

    js原型链 js原型链是什么? 在思考这个问题的时候,我们可能会有很多概念,[链子].[祖先].[father] 要理解 原型链 首先要理解 原型 对象的属性 [[Prototype]] 都指向其他对 ...