黑马程序员技术交流社区

标题: JS的原型和继承 [打印本页]

作者: 逆风TO    时间: 2020-1-6 10:36
标题: JS的原型和继承
参考文献
JavaScript原型与继承的秘密

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

我们把一个对象的__proto__属性所指向的对象叫该对象的原型;我们可以修改一个对象的原型来让这个对象拥有某种属性或某个方法
[JavaScript] 纯文本查看 复制代码
// 修改一个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 这个属性
[JavaScript] 纯文本查看 复制代码
// 函数字面量
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属性
[JavaScript] 纯文本查看 复制代码
// 其中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中的所有数据类型都有这个属性; 我们可通过下面的代码来验证一下:

[JavaScript] 纯文本查看 复制代码
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属性),我们可用下面的代码来解释一下:

[JavaScript] 纯文本查看 复制代码
const F = function() {};
// 当我们定义一个函数的时候,这个函数的prototype属性上面的constructor属性指向自己本身
F.prototype.constructor === F; // true

对JS的原始类型(string, number, boolean, null, undefined, symbol (new in ECMAScript 2015)),它们的constructor属性是只读的,不可修改:

[JavaScript] 纯文本查看 复制代码
(1).constructor = "something";
console.log((1).constructor); // 输出 ƒ Number() { [native code] }

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

[JavaScript] 纯文本查看 复制代码
Number.prototype.constructor = "number constructor";
(1).constructor = 1;
console.log((1).constructor); // 输出 number constructor

当然上面的方式不推荐




作者: zhaosongzhi    时间: 2020-1-6 11:05
相信自己,加油!
作者: 小公举    时间: 2020-1-6 11:11
感谢楼主的分享    天天开心  笑口常开
作者: zhaosongzhi    时间: 2020-1-6 11:14
相信自己,加油!
作者: zhanghua342    时间: 2020-1-6 11:25

作者: lzq123    时间: 2020-1-6 11:31
6666666666666666666666666666
作者: 九月丫    时间: 2020-1-6 11:37
干货多来点,哈哈
作者: zhaosongzhi    时间: 2020-1-6 11:38
学习到很多
作者: 霍尔    时间: 2020-1-6 11:40
棒棒的!加油
作者: 王锦    时间: 2020-1-6 11:41
666666666666666
作者: zhaosongzhi    时间: 2020-1-6 11:47
学习到很多
作者: zhaosongzhi    时间: 2020-1-6 11:56
学习到很多
作者: 王微    时间: 2020-1-6 18:28
学习到很多
作者: 孙丽    时间: 2020-1-6 18:34
6666666666
作者: dendi    时间: 2020-1-6 20:37
厉害了6666666666666666
作者: 你不爱我    时间: 2020-1-6 20:48
加油加油6666666666666
作者: 半个程序员    时间: 2020-1-6 20:59
黑马程序员,用爱成就每一位学员
作者: 举个栗子    时间: 2020-1-6 21:09
黑马程序员,西安校区威武
作者: ruoquan    时间: 2020-1-6 21:18
黑马程序员,用爱成就每一位学员
作者: hongping    时间: 2020-1-7 09:50

学计算机哪家强,就来西安黑马程序员
作者: 咨询部王丹    时间: 2020-1-7 09:53
多学,多练习,加油加油                     
作者: daoqin    时间: 2020-1-7 09:54

学计算机哪家强,就来西安黑马程序员
作者: 大安    时间: 2020-1-7 10:11

学计算机哪家强,就来西安黑马程序员
作者: 温柔一刀!喵!    时间: 2020-1-7 10:32
谢谢分享~~~
作者: 李娟玲老师    时间: 2020-1-7 10:53
棒棒哒!加油
作者: duanshaobo    时间: 2020-1-7 11:33
六六六六六六六六
作者: zhuyanting    时间: 2020-1-7 11:55

作者: sdjadyhm    时间: 2020-1-7 16:16
分享的真详细!加油棒棒哒~
作者: 哦嗨呦    时间: 2020-1-8 11:15
好人一生平安
作者: lvxinvip    时间: 2020-1-8 17:51

作者: manyihang    时间: 2020-1-8 18:31
66666666666666666666666666666
作者: 耙丫丫    时间: 2020-1-8 18:50
66666666666666666
作者: 黑马程序员啊    时间: 2020-1-8 20:45

作者: fujiangbo    时间: 2020-1-8 20:58

作者: jsnoob    时间: 2020-1-8 21:33
加油,加油,加油!!!!
作者: jsnoob    时间: 2020-1-8 21:35
加油,加油,加油!!!!
作者: zplxwl    时间: 2020-1-9 00:20
很不错哦...
作者: Emmmmm~    时间: 2020-1-9 10:25
总结的很到位加油加油
作者: 殷凯老师    时间: 2020-1-9 10:51
6666666666666666
作者: yujq    时间: 2020-1-9 13:25
6666666666666666
作者: 宗进1    时间: 2020-1-9 15:01
黑马程序员就是棒
作者: 八戒猪    时间: 2020-1-9 19:25
受教了  
作者: 逆风TO    时间: 2020-1-10 10:18
加油  加油~
作者: 专找bug    时间: 2020-1-10 10:26
加油加油
作者: 大智叔叔    时间: 2020-1-10 10:26

为千万学子而著书,66666
作者: hello!!!    时间: 2020-1-10 10:36
感谢分享
作者: 爱笑的姑娘    时间: 2020-1-10 11:02
66666666666666666666666666666666666666
作者: 我爱我1022    时间: 2020-1-10 12:34

作者: 零度☆黎明    时间: 2020-1-10 12:37
棒棒哒 ..................... ..................
作者: kdhdjdj    时间: 2020-1-10 12:45

学习到很多
作者: 1467584    时间: 2020-1-10 13:05

学习到很多
作者: longyu3    时间: 2020-1-10 13:38
写的什么东东,新手表示看不懂,继续努力
作者: json0314    时间: 2020-1-10 13:57
赞赞赞!!!
作者: 影@子~    时间: 2020-1-10 14:01
感谢分享
作者: 竹竹竹竹    时间: 2020-1-10 14:06
感谢分享
作者: majie    时间: 2020-1-10 14:17
666666666666666666666
作者: mydorling11    时间: 2020-1-10 21:21
666666666666666666666666
作者: 雨落轻舟    时间: 2020-1-11 11:16
感谢分享,学到很多
作者: 素问    时间: 2020-1-11 14:14
努力奋斗,加油,学到很多
作者: 逆风TO    时间: 2020-1-14 10:59
zhaosongzhi 发表于 2020-1-6 11:05
相信自己,加油!

加油哦~
作者: 逆风TO    时间: 2020-1-14 10:59
小公举 发表于 2020-1-6 11:11
感谢楼主的分享    天天开心  笑口常开

加油哦~
作者: 逆风TO    时间: 2020-1-14 10:59
ruoquan 发表于 2020-1-6 21:18
黑马程序员,用爱成就每一位学员

加油哦~
作者: 逆风TO    时间: 2020-1-14 10:59
zhanghua342 发表于 2020-1-6 11:25

加油哦~
作者: 逆风TO    时间: 2020-1-14 10:59
zhaosongzhi 发表于 2020-1-6 11:05
相信自己,加油!

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:00
小公举 发表于 2020-1-6 11:11
感谢楼主的分享    天天开心  笑口常开

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:00
你不爱我 发表于 2020-1-6 20:48
加油加油6666666666666

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:00
半个程序员 发表于 2020-1-6 20:59
黑马程序员,用爱成就每一位学员

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:00
半个程序员 发表于 2020-1-6 20:59
黑马程序员,用爱成就每一位学员

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:00
举个栗子 发表于 2020-1-6 21:09
黑马程序员,西安校区威武

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:00
你不爱我 发表于 2020-1-6 20:48
加油加油6666666666666

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:00
王锦 发表于 2020-1-6 11:41
666666666666666

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:00
zhaosongzhi 发表于 2020-1-6 11:47
学习到很多

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:00
dendi 发表于 2020-1-6 20:37
厉害了6666666666666666

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:00
半个程序员 发表于 2020-1-6 20:59
黑马程序员,用爱成就每一位学员

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:00
半个程序员 发表于 2020-1-6 20:59
黑马程序员,用爱成就每一位学员

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:00
举个栗子 发表于 2020-1-6 21:09
黑马程序员,西安校区威武

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:00
王锦 发表于 2020-1-6 11:41
666666666666666

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:00
zhaosongzhi 发表于 2020-1-6 11:47
学习到很多

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:00
王微 发表于 2020-1-6 18:28
学习到很多

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:01
孙丽 发表于 2020-1-6 18:34
6666666666

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:01
王锦 发表于 2020-1-6 11:41
666666666666666

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:01
zhaosongzhi 发表于 2020-1-6 11:47
学习到很多

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:01
九月丫 发表于 2020-1-6 11:37
干货多来点,哈哈

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:01
zhaosongzhi 发表于 2020-1-6 11:38
学习到很多

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:01
zhanghua342 发表于 2020-1-6 11:25

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:01
lzq123 发表于 2020-1-6 11:31
6666666666666666666666666666

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:01
你不爱我 发表于 2020-1-6 20:48
加油加油6666666666666

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:01
半个程序员 发表于 2020-1-6 20:59
黑马程序员,用爱成就每一位学员

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:01
zhaosongzhi 发表于 2020-1-6 11:05
相信自己,加油!

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:01
小公举 发表于 2020-1-6 11:11
感谢楼主的分享    天天开心  笑口常开

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:01
你不爱我 发表于 2020-1-6 20:48
加油加油6666666666666

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:01
半个程序员 发表于 2020-1-6 20:59
黑马程序员,用爱成就每一位学员

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:01
王微 发表于 2020-1-6 18:28
学习到很多

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:01
孙丽 发表于 2020-1-6 18:34
6666666666

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:02
王锦 发表于 2020-1-6 11:41
666666666666666

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:02
zhaosongzhi 发表于 2020-1-6 11:47
学习到很多

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:02
霍尔 发表于 2020-1-6 11:40
棒棒的!加油

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:02
王锦 发表于 2020-1-6 11:41
666666666666666

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:02
王微 发表于 2020-1-6 18:28
学习到很多

加油哦~
作者: 逆风TO    时间: 2020-1-14 11:02
咨询部王丹 发表于 2020-1-7 09:53
多学,多练习,加油加油

加油哦~




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2