浅谈JS的原型和继承


Posted in Javascript onMay 08, 2019

参考文献

JavaScript原型与继承的秘密

__proto__

除null和undefined,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.setPrototypeOf或Reflect.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__属性指向null
Object.prototype.__proto__ === null // true
 
// 因为Function本身也是一个函数,所以Function函数的__proto__属性指向它自身的prototype
Function.__proto__ === Function.prototype // true
 
// 因为Function的prototype是一个对象,所以Function.prototype的__proto__属性指向Object.prototype
Function.prototype.__proto__ === Object.prototype // true

constructor

constructor表示一个对象的构造函数,除null和undefined,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的原始类型(string, number, boolean, null, undefined, symbol (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

当然上面的方式不推荐

以上所述是小编给大家介绍的JS原型和继承详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
Vue.js动态组件解析
Sep 09 Javascript
bootstrap table实例详解
Jan 06 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 #Javascript
微信小程序封装自定义弹窗的实现代码
May 08 #Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 #Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 #Javascript
js实现继承的方法及优缺点总结
May 08 #Javascript
微信小程序人脸识别功能代码实例
May 07 #Javascript
iphone刘海屏页面适配方法
May 07 #Javascript
You might like
解析PHP高效率写法(详解原因)
2013/06/20 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
python实现简单登陆系统
2018/10/18 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
简单分析python的类变量、实例变量
2019/08/23 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
新闻传播专业求职信
2014/07/22 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
财务管理制度范本
2015/08/04 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
Python中time与datetime模块使用方法详解
2022/03/31 Python
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers