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.
转载于:https://www.cnblogs.com/huaan011/p/6812973.html
javascript原型链中 this 的指向相关推荐
- JavaScript——原型/原型链中的顶层对象(图解)
本篇需要提前了解的知识储备:原型和原型链,以下仅概要介绍,不作详细讲解. 详细学习可参考: JavaScript--面向对象(封装):https://blog.csdn.net/qq_29493173 ...
- JavaScript原型链的理解
一.原型链的概念 JavaScript是一门面向对象的编程语言,JavaScript 中的所有事物都是对象,并且对象与对象之间不是彼此独立的,而是有"继承"关系的. 这种" ...
- JavaScript原型链污染攻击
前言 最近在看js的时候看到p神的一篇关于js原型链污染的文章,学习一下. 下面转自p神:深入理解 JavaScript Prototype 污染攻击 还有一篇案例关于js原型链污染的ctf题:从一道 ...
- JavaScript 原型链和继承面试题
JavaScript 原型链和继承问题 JavaScript 中没有类的概念的,主要通过原型链来实现继承.通常情况下,继承意味着复制操作,然而 JavaScript默认并不会复制对象的属性,相反,Ja ...
- 一张图带你搞懂Javascript原型链关系
在某天,我听了一个老师的公开课,一张图搞懂了原型链. 老师花两天时间理解.整理的,他讲了两个小时我们当时就听懂了. 今天我把他整理出来,分享给大家.也让我自己巩固加深一下. 就是这张图: 为了更好的图 ...
- 技术分享经典 javaScript原型链面试题
技术分享 javaScript原型链 一个小题目 前置知识 变量提升和函数提升 this指针的指向 原型链是什么 new操作符的工资流程 一个小题目 今天我们部门的技术分享上出现了这样一段代码: fu ...
- JavaScript原型链以及Object,Function之间的关系
JavaScript里任何东西都是对象,任何一个对象内部都有另一个对象叫__proto__,即原型,它可以包含任何东西让对象继承.当然__proto__本身也是一个对象,它自己也有自己的__proto ...
- 变量在原型链中的查找顺序
js原型链 下面是一道js题目: [javascript] view plaincopy function C1(name){ if(name){ this.name = name; } } func ...
- JS原型链中的属性问题
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
最新文章
- 多线程:volatile
- faster rcnn 数据格式
- ffmpeg 时间戳
- Angular 内容投影 II
- html 怎么置顶表格,表格(Table)表头固定,内容上滚【5个实例】
- oracle共享服务器模式的图,Oracle 11g笔记——专有服务器、共享服务器模式
- Spring Boot————应用启动时的监听机制测试
- MySql详解(四)
- 【linux之bash】
- C语言相关问题(1)
- web前端面试题(十一)之如何解决跨域问题?
- 几种常用App原型设计工具详解
- c语言打印星号金字塔图形
- 计算机走进画图世界课件,第一单元走进画图世界.doc
- 穿越时空的爱恋-Z80 CPU的前世今生
- mplayer-2.3节:视频输出设备 .
- macBook下将m4a转换成mp3
- android-帧动画(原地不动人再走路)
- 手游运营者必学:运营的核心、宗旨和目标
- Android简易实战教程--第五话《开发一键锁屏应用》
热门文章
- swiftui_SwiftUI的混合包
- 新的一年,碎片化学习前端,我推荐这几个公众号~
- [CF903G]Yet Another Maxflow Problem
- BZOJ3019 : [Balkan2012]handsome
- spark集群详细搭建过程及遇到的问题解决(四)
- 腾讯2016春招之算法编程解析
- MFC 直线 虚线 折线 圆 椭圆 矩形 弧形
- Centos实现svn本地认证apache认证
- javascript 动态创建表格
- 2d访问冲突_Light | 基于环形分隔微镜阵列的高速随机访问轴向聚焦系统