0

0

JavaScript中对this对象理解(代码示例)

不言

不言

发布时间:2018-10-29 14:29:12

|

2554人浏览过

|

来源于segmentfault

转载

本篇文章给大家带来的内容是关于javascript中对this对象理解(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

前言:最近在细读Javascript高级程序设计,对于我而言,中文版,书中很多地方翻译的差强人意,所以用自己所理解的,尝试解读下。如有纰漏或错误,会非常感谢您的指出。文中绝大部分内容引用自《JavaScript高级程序设计第三版》。

this对象是在运行时基于函数的执行环境绑定:

在全局环境中, this等于window,而当函数被作为某个对象的方法调用时,this就指向了那个对象。

不过匿名函数的执行环境具有全局性,因此其this对象通常指向window。

立即学习Java免费学习笔记(深入)”;

在闭包中使用this对象可能会导致一些问题。

有时候由于编写闭包的方式不同,这一点可能不会那么明显。

// 在全局环境中,this等于window
function thisBoundForWindow(){
    console.log(this);
    console.log(this.name);
}
thisBoundForWindow(); // Window
var o = new Object();
o.name = "Shaw";
//当函数被作为某个对象的方法调用时,this就指向了那个对象。
thisBoundForWindow.apply(o); // {name: "Shaw"}; "Shaw" ;
//在闭包中使用this对象可能会导致一些问题。
//有时候由于编写闭包的方式不同,这一点可能不会那么明显。
var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function() {
        return function() {
            console.log(this.name);
        }
    }
}
object.getNameFunc()(); // "The Window"
/*
object.getNameFunc return=> function() {
        return function() {
            console.log(this.name);
        }
    }  => ()调用,还是在全局环境下调用的,所以this.name = window.name => "The Window"
*/

以上代码先创建了一个全局变量name,又创建了一个包含name属性的对象。

这个对象还包含一个方法——getNameFunc(), 它返回一个匿名函数,而匿名函数又返回this.name,这个匿名函数就是闭包。

再来回顾一下“闭包”的定义:

有权访问另外一个作用域中的变量的函数就是闭包。

由于getNameFunc()返回一个函数,因此调用object.getNameFunc()()就会调用它返回的函数,结果就是控制台打印出一个字符窜。

ShopWe 网店系统
ShopWe 网店系统

1.修正会员卡升级会员级别的判定方式2.修正了订单换货状态用户管理中心订单不显示的问题3.完善后台积分设置数据格式验证方式4.优化前台分页程序5.解决综合模板找回密码提示错误问题6.优化商品支付模块程序7.重写优惠卷代码8.优惠卷使用方式改为1卡1号的方式9.优惠卷支持打印功能10.重新支付模块,所有支付方式支持自动对账11.去掉规格库存显示12.修正部分功能商品价格显示4个0的问题13.全新的支

下载

然而,这个例子返回的字符窜是"The Window",即全局name变量的值。

那么,如何把this指向例子中的object呢?

把外部作用域的this对象保存在一个闭包能够访问到的变量里,就可以让闭包访问该对象了。(注意,这种手法,在使用回调函数的时候也经常用到)。

var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function(){
        var that = this;
        return function() {
            console.log(that.name);
        }
    }
}
object.getNameFunc()(); // "My Object"
/*
// 伪代码过程
object.getNameFunc  execute
=> this = object = that 
=>function() {console.log(that.name);}  
=> ()
=> that.name = object.name 
=> "My Object" 
*/

在定义匿名函数之前,把this对象赋值给了一个名叫that的变量。

而在定义了闭包之后,闭包也可以访问这个变量,因为它是我们在包含函数中特意声明的一个变量。

即使在函数返回之后,that也仍然引用着object, 所以调用Object.getNameFunc()就返回了"My Object"。

在几种特殊情况下,this的值可能会意外地改变。比如,下面的代码时修改前面例子的结果。

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        console.log(this.name);
    }
};
object.getName(); // "My Object"
(object.getName)(); // "My Object"
(object.getName = object.getName)(); // "The Window"

第一行代码跟平常一样调用了object.getName(),返回时"My Object",因为this.name就是object.name。

第二行代码在调用这个方法前给它加上了括号,虽然加上括号之后,就好像是在引用一个函数,但this的值得到了维持,因为object.getName和(object.getName)的定义是相同的。

第三行代码先执行了一条赋值语句,然后再调用赋值后的结果。因为这个赋值表达式是函数本身,所以this的值得不到维持,结果就返回了"The Window"。

//第三个例子伪代码
//理解此段代码,首先要明确一个知识点:赋值语句是有返回值的,返回值就是所赋的值(也就是‘=’右边的值)。

(object.getName = object.getName)(); // "The Window"

(object.getName = function(){ console.log(this.name)})();

(function(){console.log(this.name)})();
//所以this指向window

当然,我们不太可能会像第二行和第三行代码一样调用这个方法。暂时理解不了也没事,这个例子有助于说明即使是语法的细微变化,都有可能意外地改变this值。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

23

2026.01.19

java用途介绍
java用途介绍

本专题整合了java用途功能相关介绍,阅读专题下面的文章了解更多详细内容。

11

2026.01.19

java输出数组相关教程
java输出数组相关教程

本专题整合了java输出数组相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.19

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.19

xml格式相关教程
xml格式相关教程

本专题整合了xml格式相关教程汇总,阅读专题下面的文章了解更多详细内容。

4

2026.01.19

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

13

2026.01.19

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

93

2026.01.18

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

112

2026.01.16

全民K歌得高分教程大全
全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

155

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.8万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号