开发者社区> 阿逗> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

先从_proto_下手理解原型--原型学习(一)

简介:   给自己关于原型的学习分了一个大类,主要跟踪学习js的原型。--来自《JavaScript面向对象编程指南》的笔记,这本书难度适中,适合我们这种js基础不牢的人学习。   原型这块有两个属性:prototype 和 _proto_,容易别混淆,看了前面的基础,决定从这里开始整理我的学习笔记。
+关注继续查看

  给自己关于原型的学习分了一个大类,主要跟踪学习js的原型。--来自《JavaScript面向对象编程指南》的笔记,这本书难度适中,适合我们这种js基础不牢的人学习。

  原型这块有两个属性:prototype 和 _proto_,容易别混淆,看了前面的基础,决定从这里开始整理我的学习笔记。

     先上上代码理解:

     

var  monkey = { //声明一个对象
    feeds : "bananas", //定义一些属性
    breathes: "air"
};

function Human() { //创建一个构造函数 Human

} 

Human.prototype = monkey; //将Human的原型指向 monkey

var adou = new Human(); //实例化一个Human对象

adou.feeds = "rice"; //对这个对象添加属性,这里覆盖原型中的同名属性,(因为对象自身属性会高于原型属性)
adou.hobby = "sleep";//添加一个原型中没有的属性

console.log(adou.feeds); //rice
console.log(adou.hobby); //sleep

 

    以上的代码很简单, 最后输出的都是我们自己知道的,包括接下来,下面这行代码的输出也是我们所料想的,

    console.log(adou.breathes); //air

    我们在实例化adou这个对象的时候,并没有给他添加breathes这属性,为什么会输出air的值呢,有人说,是因为new的时候,继承了原型的属性和方法,对,是这样的,但是,它靠什么继承或者说靠什么找到monkey的breathes的属性呢?靠的就是这么一个神秘的链接 ._proto_   。我们再来想想,adou是 human 实例化出来的,human 的原型指向了monkey,也就有了monkey的方法属性,adou本身没有这个breathes属性的,在调用adou.breathes的时候,就先从adou这个对象中找,没有找到,然后就去它的原型中,欸,找到了,然后就返回了这个属性值。 也就是说 adou._proto_ === monkey; 返回值是 ture

到这里,我们就可以理解这个原型链了:实例化出来一个对象,然后查找他的属性时候,会先从他的本身去查找,如果没有找到,再从他的原型中去找,找到则返回值,找不到就返回undefined。这个查找的过程就是原型链查找的过程。

还有一个需要区分的是_proto_ 和prototype: _proto_是一个实例对象的属性,prototype是一个构造器函数的属性。看图理解:

 打开object 看看就知道了,就像这样的

 

  adou._proto_ 里面有这个_proto_ : object 

 结束语:里面有两个词 constructor 和prototype 这个是原型学习绕不开的点,我先从原型链中讲出这个链到底什么,然后再细细的将前面饶人的小点。继续开贴!

 如有错误之处,敬请批评指出!

每日一句:Past studies have found that people have a tendency to use more positive-inflected words than negative ones ― "fantastic" rather than "awful"。

翻译:以往的研究表明,相比消极性的词汇,人们倾向于使用更具积极意味的词汇。比如,更喜欢用“美妙的(fantastic)”而非“糟糕的(awful)”。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
原型分析|学习笔记
快速学习原型分析。
0 0
前端学习案例-构造函数和原型
前端学习案例-构造函数和原型
0 0
prototype和__proto__直观区别
prototype和__proto__直观区别
0 0
原型和原型链 prototype和proto的区别
原型和原型链 prototype和proto的区别
0 0
为什么你的原型总是改?
如果把做一款产品比做盖房子,那么业务流程图好比图纸,图纸如果出了问题在后面施工的过程中将面临的问题就是拆了建建了拆(交互原型图),每个产品都是由许多功能组成的,功能是把众多的需求以产品的形式呈现的用户面前,而背后的”图纸”就是业务流程图。
922 0
+关注
阿逗
前端开发工程师,做pc和h5端界面。现在前端主用框架vue.js,后端主用nodejs(框架express.js)。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载