网络科技

    今日:502| 主题:244642
收藏本版
互联网、科技极客的综合动态。

[其他] JavaScript原型链深入理解

[复制链接]
つ請繼續關注 发表于 3 天前
60 5

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在JS中,原型链是一个重要的概念,不管是继承还是属性值的查找中,都用到了原型链的基本知识,有些朋友经常问我一些关于原型链的问题,今天整理一下自己对原型链的理解,下次我就不用在去解释了,直接看文章。
   首先,大家都知道在JS中有六种 基本数据 类型和一种 复杂类型
  六种基本数据类型:
  
       
  • String   
  • Number   
  • Boolean   
  • null   
  • undefined   
  • Symbol(ES2015新加入,解决属性名的冲突问题。 详情 )  
   另外一种复杂类型自然而然就是 Object ,有的人也说JS中 一切皆是对象 。上面的六种基本数据类型中,除了null和undefined没有构造函数外,其他4种都对应有其构造函数对象,有时利用这些构造函数可以强制转换数据类型。
   要想讲清楚原型链的一些问题,还有一个特殊的Object对象必须事先说清楚,那就是 Function 对象。它也是对象,只不过比其他普通对象复杂点罢了。
  组合继承

  首先我们先写一个大家熟悉的组合继承(原型链+构造函数),然后根据这个组合继承去了解原型链到底是怎样连接起来的。
  [code]//父类
functionPerson(name,age){
if(thisinstanceofPerson){
this.name = name;
this.age = age;
}else{
Person.call(this,name,age);
}
}

Person.prototype.say = function(){
console.log('我叫'+this.name +',今年'+this.age +'岁了!')
}

//子类
functionStudent(name,age,gride){
if(thisinstanceofStudent){
Person.call(this,name,age);
this.gride = gride;
}else{
Student.call(this,name,age,gride);
}
}

Student.prototype = newPerson();
Student.prototype.constructor = Student;

Student.prototype.say = function(){
console.log('我叫'+this.name +',今年'+this.age +'岁了,考试考了'+this.gride +'分!');
}

varstu =newStudent('chping',23,100);
stu.say();
[/code]   此时会输出 我叫chping,今年23岁了,考试考了100分! ,这说明我们的组合继承就实现了,下面可以根据这个例子逐句解释一下原型链的相关问题,顺便讲解这个组合继承了。
  第一个问题:安全使用构造函数

   首先可能你对 PersonStudent 里面的那个判断有些疑问,你可能是下面这样写构造函数:
  [code]functionPerson(name,age){
this.name = name;
this.age = age;
}
[/code]   不这样写,主要是 防止构造函数被执行 ,因为一旦构造函数执行,其内的属性值会被挂载到window上面去了(当构造函数执行的时候,里面的 this 是指向window的)。
  好的,这个问题解决了,在看第二个问题。
  第二个问题:prototype对象

  接着我们来体会一下下面这句话:
  每一个函数对象都有一个prototype属性,该属性指向其prototype对象。

  这句话相信你已经听了很多遍了,可能并不是这样说的,但是就是这么个意思。那么这句话应该怎么理解呢?
   其实也不难,先看前半部分 每一个函数对象都有一个prototype属性 。这半句就是说 函数对象 默认有一个属性,这个属性叫 prototype 。另外,函数对象就是指用 function 声明的对象(补充一下:在ES2015之前,有两种声明变量的方式, function 用来声明函数变量, var 用来声明普通变量。但是在ES2015中新加了 letconst )。
      再看一下后半部分 该属性指向其prototype对象 。后半句的意思就是说 prototype 属性指向的是一个也叫 prototype 的对象,该对象是随着函数对象而产生的。也就是说,只要通过 function 定义一个函数对象,就会生成一个 prototype对象 ,并在函数上生成一个 prototype属性 来指向该 prototype属性 。用图来表示一下就是下面的样子:
   
JavaScript原型链深入理解-1 (undefined,Object,null,文章)
   ;
     从图中你可以看到还有一个知识点,就是 prototype对象 中还有一个 constructor 对象,该对象又指向了构造函数,这也是一个需要注意的知识点,后面我们在展开来说,这里先记一下。
     通过上面的这句话,我们可以联想到,Object好像也是一个构造函数,Function好像也是一个函数,他们是不是也是这样的呢?回答是肯定的,他们也是这样的。如下图:

JavaScript原型链深入理解-2 (undefined,Object,null,文章)
   ;
123下一页
友荐云推荐




上一篇:已成红海的云客服市场,网易七鱼能来搅局吗?
下一篇:Why You Should Take Another Look at C#
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

低头路过 发表于 3 天前
Duang Duang Duang Duang Duang Duang Duang Duang
回复 支持 反对

使用道具 举报

`_怀念f 发表于 3 天前
连广告也信,读书读傻了吧
回复 支持 反对

使用道具 举报

wuli诺一21 发表于 3 天前
1v1飘过
回复 支持 反对

使用道具 举报

gqgt0rZy 发表于 3 天前
一直在看
回复 支持 反对

使用道具 举报

silen_123 发表于 3 天前
silen_123代言酷辣虫
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表