javascript原型链中 this 的指向
为了弄清楚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 的指向的更多相关文章
- JavaScript原型链中toString()方法输出alert()和console.log()得到不同的结果
<script language="javascript"> function myObj(){ var total = 0; } myObj.prototype.ad ...
- Javascript原型链
原型链的关系 在Javascript中,只要创建了一个新函数,就会为该函数创建prototype属性,指向函数的原型对象,Object.prototype是所有对象最顶层的原型.所有对象都继承由Obj ...
- 关于javascript原型链的个人理解
首先js是一种面对对象的语言,虽然大多数时候是以面对过程的形式展现出来.先来看一段代码: function Base() { this.name = 'tarol'; } function Sub() ...
- JavaScript原型链和继承
1.概念 JavaScript并不提供一个class的实现,在ES6中提供class关键字,但是这个只是一个语法糖,JavaScript仍然是基于原型的.JavaScript只有一种结构:对象.每个对 ...
- 明白JavaScript原型链和JavaScrip继承
原型链是JavaScript的基础性内容之一.其本质是JavaScript内部的设计逻辑. 首先看一组代码: <script type="text/javascript"&g ...
- 资料--JavaScript原型链
JavaScript原型链 原文出处:https://www.cnblogs.com/chengzp/p/prototype.html 目录 创建对象有几种方法 原型.构造函数.实例.原型链 inst ...
- JavaScript原型链及其污染
JavaScript原型链及其污染 一.什么是原型链? 1.JavaScript中,我们如果要define一个类,需要以define"构造函数"的方式来define: functi ...
- 一张图带你搞懂Javascript原型链关系
在某天,我听了一个老师的公开课,一张图搞懂了原型链. 老师花两天时间理解.整理的,他讲了两个小时我们当时就听懂了. 今天我把他整理出来,分享给大家.也让我自己巩固加深一下. 就是这张图: 为了更好的图 ...
- javascript 原型链
浅谈JS原型链 原型链 ECMAScript中描述了原型链的概念.我们知道ECMAScript并不像C++,Java那样使用类,但是对象仍然可以通过多种方式创建,其中就有构造函数方式.每个构造函数都有 ...
随机推荐
- Linux Kafka源码环境搭建
本文主要讲述的是如何搭建Kafka的源码环境,主要针对的Linux操作系统下IntelliJ IDEA编译器,其余操作系统或者IDE可以类推. 1.安装和配置JDK确认JDK版本至少为1.7,最好是1 ...
- Opening socket connection to server :2181. Will not attempt to authenticate using SASL (unknown error) hbase
问题: 在HBase机群搭建完成后,通过jdbc连接hbase,在连接zookeeper阶段出现Opening socket connection to server :2181. Will not ...
- Java - 19 Java 异常处理
Java 异常处理 异常是程序中的一些错误,但并不是所有的错误都是异常,并且错误有时候是可以避免的. 比如说,你的代码少了一个分号,那么运行出来结果是提示是错误java.lang.Error:如果你用 ...
- 「NOI2018」屠龙勇士(CRT)
/* 首先杀每条龙用到的刀是能够确定的, 然后我们便得到了许多形如 ai - x * atki | pi的方程 而且限制了x的最小值 那么exgcd解出来就好了 之后就是扩展crt合并了 因为全T调了 ...
- jsfiddle将demo设置为public公开的
jsfiddle的demo虽然可以通过链接分享给所有人,但是进入个人主页是没有的,需要将项目设置为公开public的 根据提示,打开demo项目页==>左侧菜单==>填写标题和描述==&g ...
- TessorFlow学习 之 神经网络的构建
1.建立一个神经网络添加层 输入值.输入的大小.输出的大小和激励函数 学过神经网络的人看下面这个图就明白了,不懂的去看看我的另一篇博客 def add_layer(inputs , in_size , ...
- 占cpu 100%的脚本
#! /bin/sh # filename killcpu.sh if [ $# -ne 1 ] ; then echo "USAGE: $0 <CPUs>|stop" ...
- [Android]数据篇 --- SharedPreferences
转载请标注:转载于http://www.cnblogs.com/Liuyt-61/p/6637515.html -------------------------------------------- ...
- 2.App爬取相关库的安装(安装mitmproxy)
mitmproxy 是一个支持HTTP 和HTTPS 的抓包程序,类似fiddler,Charles的功能(它通过控制台的形式操作). mitmproxy 两个关键的组件:mitmdump 和 mit ...
- 四、Java web 部 分试题
1 .Tomcat 的 优 化 经 验 答:去掉对 web.xml 的监视,把 jsp 提前编辑成 Servlet. 有富余物理内存的情况,加大 tomcat 使用的 jvm 的内存 2 .HTTP ...