没有合适的资源?快使用搜索试试~ 我知道了~
傲娇大少之—【JS的原型,prototype、__proto__、constructor】
0 下载量 42 浏览量
2021-01-08
11:45:47
上传
评论
收藏 216KB PDF 举报
温馨提示
不求甚解 – – liao一下prototype 如果你爱我,就干了这碗热热的毒鸡汤! 在父母的期望面前我们不敢说不行,我们总是用行动告诉他们我们是真的不行。欧耶! 关于prototype,怎么说呢,以前的前端开发是经常用的,但是最近忽然发现,好像很久都没用过这个属性了。因为现在封装好的主流框架和插件很多,用着方便,底层的东西都不怎么用了,也用不太到了。 最近自己在开发一款插件,突然发现这个东西我好像忘的差不多了。我的良心受到了深深的谴责,我怎么可能是这么不求甚解的人呢?(来自灵魂的拷问:难道不是吗?)所以写点东西,记录一下。哼哼~ 什么是prototype? prototype [ˈprəʊ
资源推荐
资源详情
资源评论
傲娇大少之傲娇大少之—【【JS的原型,的原型,prototype、、__proto__、、
constructor】】
不求甚解不求甚解 – – liao一下一下prototype
如果你爱我,就干了这碗热热的毒鸡汤!
在父母的期望面前我们不敢说不行,我们总是用行动告诉他们我们是真的不行。欧耶!
关于prototype,怎么说呢,以前的前端开发是经常用的,但是最近忽然发现,好像很久都没用过这个属性了。因为现在封装
好的主流框架和插件很多,用着方便,底层的东西都不怎么用了,也用不太到了。
最近自己在开发一款插件,突然发现这个东西我好像忘的差不多了。我的良心受到了深深的谴责,我怎么可能是这么不求甚解
的人呢?(来自灵魂的拷问:难道不是吗?)所以写点东西,记录一下。哼哼~
什么是什么是prototype??
prototype [ˈprəʊtətaɪp] : 原型
大家知道JavaScript是面向对象的,还有很多语言也是面向对象的,比如C++,Java等,但是JavaScript厉害了,官方定义:
在JavaScript中一切皆为对象:字符串、数字、数组、日期,等等。(这么多对象,单身狗是不是很心动?咳咳)
话说JavaScript的面向对象和其它的语言的一样吗?首先,两者间面向对象的原理肯定是一样的。但是呢,又存在着一些细微
的差别,在我的感觉上呢:一个是恪守成规的书香门第,一个是随遇而安的江湖浪子。毕竟当时Brendan Eich开发JavaScript
的时候也是比较随性的,怎么简单好用怎么来,也方便了现在很多的初学者。拿Java和JavaScript举例吧,毕竟JavaScript是
在Java盛行时的大环境下开发出来的:
在Java的面向对象中,类和实例是不同的实体,但是JavaScript中,一切皆为对象。
在Java的面向对象中,类不能当做函数去运行,但是JavaScript可以。
在Java的面向对象中,有丰富的继承机制,但是JavaScript仅通过原型链继承。
在Java的面向对象中,良好的成员作用域支持(private,protected,public等),但是JavaScript中全继承。
还有很多哈,在这就不一一列举了(下面会有,感兴趣的去看),JavaScript和Java一样是面向对象,但是JavaScript比Java
的面向对象更加的灵活,方便。
所以JS中对象的定义: 拥有属性和方法的数据。拥有属性和方法的数据。
定义的非常的简单大气:一个对象,就是一个独立的个体,比如定义一个字符串,它很独立的,它有自己的长度属性:
str.length;还有它的方法,比如subString(),indexOf() 等等,所以它就是一个字符串对象。
跑题了?没有没有,因为在JavaScript中,prototype对象是实现面向对象的一个重要机制。上面埋了伏笔,JavaScript是通过
原型链来实现继承的。
先看一下prototype的官方定义: prototype 属性使您有能力向对象添加属性和方法。属性使您有能力向对象添加属性和方法。
从这两个定义中是不是看出了点什么,没错,prototype就是为了实现面向对象的继承被弄出来的。因为Brendan Eich大神不
想讲Java上那套完整的继承机制全搬到JavaScript上,所以他决定为构造函数设置一个prototype属性,指向一个原型对象,而
所有的对象都会继承原型对象的属性和方法。
所以原型链继承方式就这么形成了:
创建构造函数
通过new创建构造函数的实例,即对象
通过构造函数自带的prototype对象,即原型对象,来修改对象的属性和方法
举个栗子:
function beauty () { // 构造函数
this.skin = 'white';
}
let my = new beauty(); // 实例化对象
let your = new beauty()
console.log(my.skin); // 继承原生属性
beauty.beautiful = 'yes'; // 直接为构造函数添加属性
console.log(my.beautiful); // 没继承到
beauty.prototype.realBeautiful = 'yes'; // 通过原型对象给构造函数添加属性
console.log(my.realBeautiful); // 继承到了
console.log(your.realBeautiful); // 其它实例也继承到共享属性
执行结果:
总结一下:
prototype是构造函数创建完成时自动生成的一个是构造函数创建完成时自动生成的一个prototype 属性。该属性是个指针,指向了一个对象,这个对象我们称之为属性。该属性是个指针,指向了一个对象,这个对象我们称之为
原型对象。我们可以在任意时刻和位置,通过修改该原型对象的属性或方法,为实例添加共享属性或方法。原型对象。我们可以在任意时刻和位置,通过修改该原型对象的属性或方法,为实例添加共享属性或方法。
用白话说,就是你的项目中大量的需要一个共享属性的时候,用prototype就对了。
再举个栗子,比如说我的项目中每个日期实例都需要一个返回去年年份的函数。可以这么做:
Date.prototype.getLastYear = () => {
let now = new Date();
return now.getFullYear() - 1;
};
let d = new Date();
console.log(d.getLastYear());
结果:
就是随便举个栗子,大概意思就是这么回事,理解了就好。
但是一般我们开发的过程中是不会这么用的,毕竟改了一些公共的类会导致很多问题的,在实际开发过程中,我们一般都这么
搞:
function myDate () {
}
myDate.prototype = new Date(); // 用一个新的构造函数去封装我们要继承的类
myDate.prototype.getLastYear = () => {
let now = new Date();
return now.getFullYear() - 1;
};
let d = new myDate(); // 创建这个新的构造函数的实例,继承原型对象的方法
console.log(d.getLastYear());
创建一个新的构造函数,原型指向我们需要的类,这样我们给构造函数原型添加公共属性时就很安全,方便了。(实现这种继
承有很多方式,下一篇会写。)
prototype、、constructor、、__proto__
了解了原型,再了解一下原型链吧。
JavaScript 对象是动态的属性“包”(指其自己的属性)。JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象
的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个
名字匹配的属性或到达原型链的末尾。
比如我写一个继承关系:
function beauty () { // 构造函数
this.skin ='white';
this.stature = '170';
}
beauty.prototype.realBeautiful = 'yes';
let my = new beauty(); // 实例化对象
console.log(beauty.prototype);
console.log(my);
看控制台上会怎么显示:
剩余6页未读,继续阅读
资源评论
weixin_38584043
- 粉丝: 4
- 资源: 947
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功