为了弄清楚Javascript原型链中的this指向问题,我写了个代码来测试:

var d = {
d: 40
};
var a = {
x: 10,
calculate: function (z) {
return this.x + this.y + z + this.d
},
__proto__:d
}; var b = {
y: 20,
__proto__: a
}; var c = {
y: 30,
__proto__: a
};

  运行如下的代码进行测试:

console.log(b.calculate(30)); // 100
console.log(c.calculate(40)); // 120

  从这个结果中可以看出 this.y 和 this.d 都获取到了值。但是如何找到值的呢。

翻阅资料得出:this这个值在一个继承机制中,仍然是指向它原本属于的对象,而不是从原型链上找到它时,它所属于的对象。

此时我们得出 b.calculate(30)中的this指的就是 b 对象。

  1. this.x的值首先在 b对象中找,没找到,就沿着原型链找,在b的原型a中找到了值是10。

  2.this.y的值首先在 b对象中找,找到了,值为20.

  3.this.d的值首先在b对象中找,没找到,就沿着原型链找,在b的原型a中也没找到,然后在a的原型d中找,找到了值是40.

4.此时运算 this.x + this.y + z + this.d=10+20+30+40=100.

同理: c.calculate(40) 的值就是 10+30+40+40=120

此时我们把代码再修改下:

var d = {
d: 40
};
var a = {
x: 10,
calculate: function (z) {
console.log(x);
console.log(y);
console.log(z);
console.log(d);
return x + y + z + d //去掉了this
},
__proto__:d
}; var b = {
y: 20,
__proto__: a
}; var c = {
y: 30,
__proto__: a
};

  在运行:

console.log(b.calculate(30))

  得出结果:

此时在 方法calculate中是没有定义 x 这个变量的。 所以就 提示 x is not defined.

javascript原型链中 this 的指向的更多相关文章

  1. JavaScript原型链中toString()方法输出alert()和console.log()得到不同的结果

    <script language="javascript"> function myObj(){ var total = 0; } myObj.prototype.ad ...

  2. Javascript原型链

    原型链的关系 在Javascript中,只要创建了一个新函数,就会为该函数创建prototype属性,指向函数的原型对象,Object.prototype是所有对象最顶层的原型.所有对象都继承由Obj ...

  3. 关于javascript原型链的个人理解

    首先js是一种面对对象的语言,虽然大多数时候是以面对过程的形式展现出来.先来看一段代码: function Base() { this.name = 'tarol'; } function Sub() ...

  4. JavaScript原型链和继承

    1.概念 JavaScript并不提供一个class的实现,在ES6中提供class关键字,但是这个只是一个语法糖,JavaScript仍然是基于原型的.JavaScript只有一种结构:对象.每个对 ...

  5. 明白JavaScript原型链和JavaScrip继承

    原型链是JavaScript的基础性内容之一.其本质是JavaScript内部的设计逻辑. 首先看一组代码: <script type="text/javascript"&g ...

  6. 资料--JavaScript原型链

    JavaScript原型链 原文出处:https://www.cnblogs.com/chengzp/p/prototype.html 目录 创建对象有几种方法 原型.构造函数.实例.原型链 inst ...

  7. JavaScript原型链及其污染

    JavaScript原型链及其污染 一.什么是原型链? 1.JavaScript中,我们如果要define一个类,需要以define"构造函数"的方式来define: functi ...

  8. 一张图带你搞懂Javascript原型链关系

    在某天,我听了一个老师的公开课,一张图搞懂了原型链. 老师花两天时间理解.整理的,他讲了两个小时我们当时就听懂了. 今天我把他整理出来,分享给大家.也让我自己巩固加深一下. 就是这张图: 为了更好的图 ...

  9. javascript 原型链

    浅谈JS原型链 原型链 ECMAScript中描述了原型链的概念.我们知道ECMAScript并不像C++,Java那样使用类,但是对象仍然可以通过多种方式创建,其中就有构造函数方式.每个构造函数都有 ...

随机推荐

  1. ZooKeeper系列(5):管理分布式环境中的数据

    引言 本节本来是要介绍ZooKeeper的实现原理,但是ZooKeeper的原理比较复杂,它涉及到了paxos算法.Zab协议.通信协议等相关知 识,理解起来比较抽象所以还需要借助一些应用场景,来帮我 ...

  2. Linux下使用OTL操作mysql数据库

    首先重点推荐介绍otl介绍及用法的文章:http://www.cnblogs.com/fnlingnzb-learner/p/5835560.html 一.编写代码 注:以下代码来自OTL示例,略有改 ...

  3. JavaWeb项目中web.xml有关servlet的基本配置

    JavaWeb项目中web.xml有关servlet的基本配置: 我们注意到,tomcat下的conf中也有一个web.xml文件,没错的,所有的JavaWeb项目中web.xml都继承自服务器下的w ...

  4. spring boot 整合pagehelper分页插件

    Spring Boot 整合pagehelper分页插件 测试环境: spring boot  版本 2.0.0.M7 mybatis starter 版本  1.3.1 jdk 1.8 ------ ...

  5. JVM总结-垃圾回收

    Java 虚拟机的自动内存管理,将原本需要由开发人员手动回收的内存,交给垃圾回收器来自动回收.不过既然是自动机制,肯定没法做到像手动回收那般精准高效 [1] ,而且还会带来不少与垃圾回收实现相关的问题 ...

  6. git命令简洁版

    五:业务逻辑GITgit  status要经常用 1. 把远端代码下载下来git clone https://或者git@10.0.4.73:sns,进入cd 文件夹 另外在自己新建立一个项目时,需要 ...

  7. 《机器学习实战》Logistic回归

    注释:Ng的视频有完整的推到步骤,不过理论和实践还是有很大差别的,代码实现还得完成 1.Logistic回归理论 http://www.cnblogs.com/wjy-lulu/p/7759515.h ...

  8. uva-10716-贪心

    题意:输入长度在100内的小写字母的字符串,求把它变成回文字符串的最少交换次数.如果不能变成回文串,输入,Impossible. 解法: 要变成回文字符串,必须满足一个性质,所有的字符出现次数都是偶数 ...

  9. 代码参考: css3动画—— 星系轨道

    CSS3橙色的星球绕轨道公转动画 http://hovertree.com/texiao/css3/24/ 例子 http://hovertree.com/h/bjaf/css3xingxi.htm ...

  10. windows server 域分发与分配软件

    参考网站:https://blog.csdn.net/southwind0/article/details/80734508 1.win 2008创建域 https://jingyan.baidu.c ...