JS的原型链到底该怎么学啊,要疯了

2020-12-31 15:33:39 字数 4855 阅读 8345

1楼:匿名用户

贼简单,就是下层找不到就会向上层寻找这个属性,一直找到object的方法,都没有才是真没有

谈谈对原型链的理解 js原型链怎么理解

2楼:河东陈彬

js对象是由构造方法创建的,构造方法有个原型prototype,那么对象和原型之间的关系就叫做原型链。例如用原型给对象定义方法obj.prototype.

funname = function();对象可以直接从原型中调用这个方法obj.funname();更多js深层知识可以**前面是二九6中间是5九一后面是二九零,每天分享js深层技术。

js里面的继承怎么理解,原型链呢,,好难理解啊,

3楼:匿名用户

function f1(){};

var f2 = function(){};

var f3 = new function('str','console.log(str)');

var o3 = new f1();

var o1 = {};

var o2 =new object();

console.log(typeof object); //function

console.log(typeof function); //function

console.log(typeof o1); //objectconsole.log(typeof o2); //objectconsole.

log(typeof o3); //objectconsole.log(typeof f1); //functionconsole.log(typeof f2); //function

深入分析js原型链以及为什么不能在原型链上使

4楼:育知同创教育

在刚刚接触js原型链的时候都会接触到一个熟悉的名词:prototype;如果你曾经深入过prototype,你会接触到另一个名词:__proto__(注意:

两边各有两条下划线,不是一条)。以下将会围绕prototype和__proto__这两个名词解释为什么不能在原型链上使用对象以及js原型链的深层原理。

一、为什么不能在原型链上使用对象:

先举一个非常简单的例子,我有一个类叫humans(人类),然后我有一个对象叫tom(一个人)和另一个对象叫merry(另一个人),很明显tom和merry都是由humans这一个类实例化之后得到的,然后可以把这个例子写成如下**:

function humans() humans.prototype.ability = true;

var tom = new humans();var merry = new humans();alert(tom.foot);//结果:2alert(tom.

ability);//结果:truealert(merry.foot);//结果:

2alert(merry.ability);//结果:true

以上是一个非常简单的面向对象的例子,相信都能看懂,如果尝试修改tom的属性ability,则

function humans()

humans.prototype.ability = true;

var tom = new humans();var merry = new humans();tom.ability = false;alert(tom.foot);//结果:

2alert(tom.ability);//结果:falsealert(merry.

foot);//结果:2alert(merry.ability);//结果:

true

以上可以看出tom的ability属性的值改变了,但并不影响merry的ability属性的值,这正是我们想要的结果,也是面向对象的好处,由同一个类实例化得到的各个对象之间是互不干扰的;ok,接下来给ability换成object对象又如何?**如下:

function humans() humans.prototype.ability = ;var tom = new humans();var merry = new humans();tom.

ability = ;

alert(tom.ability.run); //结果:'50米/10秒'

alert(tom.ability.jump); //结果:'2米'

alert(merry.ability.run); //结果:'100米/10秒'

alert(merry.ability.jump); //结果:'3米'

以上**就是在原型链上使用了对象,但从以上**可以看出tom的ability属性的改变依然丝毫不会影响merry的ability的属性,于是乎你会觉得这样的做法并无不妥,为什么说不能在原型链上使用对象?接下来的**就会显得很不一样,并且可以完全表达出原型链上使用对象的危险性:

function humans()

humans.prototype.ability = ;var tom = new humans();var merry = new humans();tom.

ability.run = '50米/10秒';

tom.ability.jump = '2米';alert(tom.ability.run); //结果:'50米/10秒'

alert(tom.ability.jump); //结果:'2米'

alert(merry.ability.run); //结果:'50米/10秒'

alert(merry.ability.jump); //结果:'2米'

没错,从以上**的输出结果可以看出tom的ability属性的改变影响到merry的ability属性了,于是就可以明白在原型链上使用对象是非常危险的,很容易会打破实例化对象之间的相互独立性,这就是为什么不能在原型链上使用对象的原因?是的,但我想说的可不只如此,而是其中的原理,看完后面js原型链的深层原理之后,相信你会完全明白。

在以下第二部份解释js原型链的深层原理之前,先来明确一个概念:原型链上的属性或方法都是被实例化对象共用的,正因如此,上面的tom.ability.

run='50米/10秒',改动了原型连上的ability才导致另一个对象merry受影响,既然如此,你可能会问tom.ability = 不也是改动了原型链上的ability吗,为什么merry没有受影响?答案是tom.

ability = 并没有改动原型链上的ability属性,而是为tom添加了一个自有属性ability,以后访问tom.ability的时候不再需要访问原型链上的ability,而是访问其自有属性ability,这是就近原则;ok,如果你仍有疑问,可以用纸笔记下你的疑问,继续往下看你会更加明白。

二、js原型链的深层原理:

首先要引入一个名词__proto__,__proto__是什么?在我的理解里,__proto__才是真正的原型链,prototype只是一个壳。如果你使用的是chrome浏览器,那么你可以尝试使用alert(tom.

__proto__.ability.run),你发现这样的写法完全可行,而且事实上当只有原型链上存在ability属性的时候,tom.

ability其实是指向tom.__proto__.ability的;当然,如果你跑到ie浏览器里尝试必然会报错,事实上ie浏览器禁止了对__proto__的访问,而chrome则是允许的,当然实际开发中,我并不建议直接就使用__proto__这一属性,但它往往在我们调试**时发挥着重要作用。

有人可能会问到底tom.__proto__和humans.prototype是什么关系,为了理清两者的关系,下面先列出三条法则:

1、对象是拥有__proto__属性的,但没有prototype;例如:有tom.__proto__,但没有tom.prototype。

2、类没有__proto__属性,但有prototype;例如:没有humans.__proto__,但有humans.

prototype(这里必须纠正一下,同时非常感谢‘川川哥哥’提出这一处错处,确实是我在写到这一点的时候没有考虑清楚,事实上humans也是function的一个实例对象,因此humans.__proto__===function.prototype是绝对成立的,稍有特殊的是这时function.

prototype是指向一个empty(空)函数,值得推敲)。

3、由同一个类实例化(new)得到的对象的__proto__是引用该类的prototype的(也就是我们说的引用传递);例如tom和merry的__proto__都引用自humans的prototype。

ok,上面说过tom.ability=其实并没有改变原型链上的ability属性,或者说并没有改变tom.__proto__.

ability,而是为tom添加了一个自有的ability属性,为了说明这一点,我们再次回到以上的第三个**块,其**如下:

function humans()

humans.prototype.ability = ;var tom = new humans();var merry = new humans();tom.

ability = ;alert(tom.ability.run); //结果:

'50米/10秒'alert(tom.ability.jump); //结果:

'2米'alert(merry.ability.run); //结果:

'100米/10秒'alert(merry.ability.jump); //结果:

'3米'

当为tom.ability赋予新的值后,再次访问tom.ability时就不再指向tom.

__proto__.ability了,因为这时其实是为tom添加了自有属性ability,可以就近取值了,你可以尝试用chrome浏览器分别alert(tom.ability.

run)和alert(tom.__proto__.ability.

run),你会发现确实存在两个不同的值

男生的短发发型都有哪些到底该怎么打理呢

1楼 长岛的雪丶 发型是一个人外在的重要因素,甚至可以决定一个人的整体效果是否好看,男生应该尤其注意自己到底适合哪种发型,否则一不小心可就进入洗剪吹部队了,所以快来看看吧。 随着天气变得越来越热,清爽的发型变成了许多男生的第一选择,那么你究竟是选光头 圆寸 平头 还是寸头呢?其实不同的人有不同的选择...

小孩子到底该不该尽早的去学编程,小孩子到底该不该着急去学少儿编程?该怎么解决?天津少儿编程培训

1楼 匿名用户 我觉得小孩子不应该那么早去逼着学习编程,现在是玩的时间,玩的年龄,有着大人没有的灵气。叙叙教导,指着电脑中的一切告诉他,最后问他想不想学,想用电脑干什么?孩子的世界没有金钱,只有单纯。 好好考虑 2楼 至今还在不上班 我觉得小孩子应该尽早去学编程,因为现在是一个信息化的时代,学了编程...

放在家里的黄金项链手链戒指不见了怎么能够找到啊

1楼 给我你的怀抱 不急不急,最好有个金属探测器最好,仔细找找别瞎着急 2楼 百衣百顺 浠 仔细找一遍,没有了报警吧 3楼 匿名用户 不是被偷 用金属探测器 放在家里的 首饰怎么也找不到,有什么办法可以找到 4楼 沒囿叻結局 1 可能在家里的哪个角落里,再仔细找找。 2 有可能被偷了,打 报警。 金...