[JavaScript]再谈 this

再谈this

关于 this,之前有写一篇文章略微涉及到:就是这里

当时还没理解得很深入,浅尝辄止的感觉,也没有很全面地总结 this 的指向和用法。

直到我昨晚看到了一篇博文,google搜索 js this 出来的第一篇文章,茅塞顿开,对于 this 有了更直观更全面更细致更清晰的了解!我真希望每一个对 this 感到困惑的朋友可以看到这篇文章,写得很好,感谢这位作者和他的文章。

先列举一下他的观点:

1.如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题,你想了解可以自行上网查找。

2.如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。

3.如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象。

特殊情况:

this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的。

(当this碰到return时)如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。

这样顺着脉络一分析,像下面这种题目,是难不倒我们了:

function X(){
    return object = {
        name: ‘object‘,
        options: null,
        f1(x){
            this.options = x    // 3.x.f1 被调用后,这里的 this 就是 object,this.options = options
            this.f2()   // 4.x.f1 被调用后,这里的 this 就是 object,所以这里就相当于 object.f2()
        },
        f2(){
            this.options.f2.call(this)  // 5.object.f2() 因为是 object 调用了 f2,所以这里的 this 也是 object ,即 object.options.f2.call(object)
        }
    }
}

var options = {
    name: ‘options‘,
    f1(){},
    f2(){
        console.log(this) // 6.既然 object 都被当成了 this 传进来了,那这里的 this 毫无以为就是 object
    }
}

var x = X() // 1.x 是 X 的实例,X 被调用后返回一个对象 object,所以 x === object
x.f1(options)   // 2.x 调用了 f1,所以这里的 this 就是 x,也就是 object,这句代码相当于 x.f1.call(object,options)

这下可以理解 this 了吧~

再次感谢这篇博文以及他的作者

原文地址:https://www.cnblogs.com/No-harm/p/9685975.html

时间: 2024-10-09 15:43:11

[JavaScript]再谈 this的相关文章

再谈javascript图片预加载技术

图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展示出来,所以lightbox显示的图片的速度体验要比直接输出的差很多,而本文说提到的预加载技术主要针对获取图片尺寸. 一段典型的使用预加载获取图片大小的例子: var imgLoad = function (url, callback) {    var img = new Image();   

我看朴灵评注阮一峰的《JavaScript 运行机制详解:再谈Event Loop》

阮一峰和朴灵对我来说都是大牛,他们俩的书我都买过,阮老师的译作<软件随想录>和朴灵的<深入浅出node.js>.这个事情已经过了4个月了,所以我拿来讲应该也没啥问题. 这件事情是这样的,阮一峰在自己的博客写了篇文章<JavaScript 运行机制详解:再谈Event Loop>,然后朴灵看见了,发现了很多问题,然后在印象笔记又写了篇文章<[朴灵评注]JavaScript 运行机制详解:再谈Event Loop>,由于印象笔记现在已经不能访问了(尼玛也太烂了)

再谈JSON -json定义及数据类型

再谈json 最近在项目中使用到了highcharts ,highstock做了一些统计分析,使用jQuery ajax那就不得不使用json, 但是在使用过程中也出现了很多的疑惑,比如说,什么情况下我们需要去将字符串转换为json对象,什么情况下就不需要转换.通过hql和sql查询返回的list,通过json array 写入response,接下来json就上场了. 在这里就复制粘贴,再对其的基本定义进行一些区分. json:(JavaScript Object Notation) 是一种轻

再谈json - json常用函数

json常用的函数有JSON.parse().JSON.stringify(),用于json对象和字符串之间的互相转换. 1.JSON.parse() 将 JavaScript 对象表示法 (JSON) 字符串转换为对象. JSON.parse(text [, reviver]) var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone"

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

Angular 的数据绑定采用什么机制,详述原理? 脏检查机制.阐释脏检查机制,必须先了解如下问题. 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑定($scope -> view),用于数据显示,简写形式是 {{}}. 两者的区别在于页面没有加载完毕 {{val}} 会直接显示到页面,直到 Angular 渲染该绑定数据(这种行为有可能将 {{val}} 让用户看到):而 ng-bind 则是在 Angular 渲染完毕后将数据显示. ng-

从一起“盗币”事件再谈合约安全问题

目录 从一起"盗币"事件再谈合约安全问题 一. 起因 二. solidity复杂变量的地址计算问题 一个示例 简单变量的地址 动态数组以及Map的地址 三. 先来玩demo 部署合约 初次调用newRecords 从失败中找到正确方法 构造成功的调用 四. 再一起来玩DVPgame 覆盖token 随便转点以太坊给DVPgame 看看别人怎么玩的 五. 剩下的问题 六. 小测试工具 从一起"盗币"事件再谈合约安全问题 本来是受到从一起"盗币"事件

再谈 Go 语言在前端的应用前景

12 月 23 日,七牛云 CEO & ECUG 社区发起人许式伟先生在 ECUG Con 2018 现场为大家带来了主题为<再谈 Go 语言在前端的应用前景>的内容分享. 本文是对演讲内容的实录整理. 今年是举办 ECUG Con 的第 11 年,之前我谈的基本都是服务端的开发实践.从去年起我开始不谈后端而是谈前端.当然,去年我没有说为什么我会关注前端.今天再谈 Go 语言在前端的应用之前,我先简单聊一下思路脉络,为什么我今天会关注前端. 前端的演进 最早的 PC 时期,常见的设备主

C++ Primer 学习笔记_73_面向对象编程 --再谈文本查询示例

面向对象编程 --再谈文本查询示例 引言: 扩展第10.6节的文本查询应用程序,使我们的系统可以支持更复杂的查询. 为了说明问题,将用下面的简单小说来运行查询: Alice Emma has long flowing red hair. Her Daddy says when the wind blows through her hair, it looks almost alive, like a fiery bird in flight. A beautiful fiery bird, he

C++ Primer 学习笔记_74_面向对象编程 --再谈文本查询示例[续/习题]

面向对象编程 --再谈文本查询示例[续/习题] //P522 习题15.41 //1 in TextQuery.h #ifndef TEXTQUERY_H_INCLUDED #define TEXTQUERY_H_INCLUDED #include <iostream> #include <fstream> #include <sstream> #include <vector> #include <set> #include <map&g