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那样使用类,但是对象仍然可以通过多种方式创建,其中就有构造函数方式.每个构造函数都有 ...
随机推荐
- Hadoop 2.x常用端口及查看方法
Hadoop集群的各部分一般都会使用到多个端口,有些是daemon之间进行交互之用,有些是用于RPC访问以及HTTP访问.而随着Hadoop周边组件的增多,完全记不住哪个端口对应哪个应用,特收集记录如 ...
- python 实现排序算法(二)-合并排序(递归法)
#!/usr/bin/env python2 # -*- coding: utf-8 -*- """ Created on Tue Nov 21 22:28:09 201 ...
- Vsftp的PASV mode(被动模式传送)和Port模式及 Linux下VsFTP配置全方案
什么叫做PASV mode(被动模式传送)?他是如何工作的? FTP的连接一般是有两个连接的,一个是客户程和服务器传输命令的,另一个是数据传送的连接.FTP服务程序一般会支持两种不同的模式,一种是Po ...
- phalcon7开发环境搭建
1.安装apahce服务器 2.安装mysql 3.安装php7 4.编译和安装phalcon7 git clone --depth=1 git://github.com/dreamsxin/cpha ...
- angularjs指令实现轮播图----swiper
'use strict'; angular.module('app').directive('swipersLbt',swipers); swipers.$inject = ['$timeout']; ...
- 关于python无法显示中文的问题:SyntaxError: Non-ASCII character '\xe4' in file test.py on line 3, but no encoding declared。
[已解决]关于python无法显示中文的问题:SyntaxError: Non-ASCII character '\xe4' in file test.py on line 3, but no enc ...
- 【Linux】【Jenkins】Jenkins安装和配置等
Jenkins配置详解: http://lib.csdn.net/article/git/18342 Jenkins介绍 Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功 ...
- h5py库安装问题解决
H5py官网教程完全有问题,这个大家都这么说,但是貌似问题出现在Numpy上,由于numpy的版本过高! 这里是官网的教程:http://docs.h5py.org/en/latest/build.h ...
- Linux下安装PHP+Nginx+Msql
安装Nginx: 1.先指定个文件存放位置 usr/local/src 2. 下载nginx, wget http://nginx.org/download/nginx-1.12.0.tar.gz ...
- [Unity插件]Lua行为树(二):树结构
参考链接:https://blog.csdn.net/u012740992/article/details/79366251 在行为树中,有四种最基本的节点,其继承结构如下: Action->T ...