this

JavaScript的函数内部如果调用了this,那么这个this到底指向谁?

答案是,视情况而定!

如果以对象的方法形式调用,比如xiaoming.age(),该函数的this指向被调用的对象,也就是xiaoming,这是符合我们预期的。

如果单独调用函数,比如getAge(),此时,该函数的this指向全局对象,也就是window。

坑爹啊! 更坑爹的是,如果这么写:

var fn = xiaoming.age; // 先拿到xiaoming的age函数
fn(); // NaN

也是不行的!要保证this指向正确,必须用obj.xxx()的形式调用!

由于这是一个巨大的设计错误,要想纠正可没那么简单。ECMA决定,在strict模式下让函数的this指向undefined,因此,在strict模式下,你会得到一个错误:

'use strict';var xiaoming = {name: '小明',birth: 1990,age: function () {var y = new Date().getFullYear();return y - this.birth;}
};var fn = xiaoming.age;
fn(); // Uncaught TypeError: Cannot read property 'birth' of undefined

这个决定只是让错误及时暴露出来,并没有解决this应该指向的正确位置。

有些时候,喜欢重构的你把方法重构了一下:

'use strict';var xiaoming = {name: '小明',birth: 1990,age: function () {function getAgeFromBirth() {var y = new Date().getFullYear();return y - this.birth;}return getAgeFromBirth();}
};

xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined

结果又报错了!原因是this指针只在age方法的函数内指向xiaoming,在函数内部定义的函数,this又指向undefined了!(在非strict模式下,它重新指向全局对象window!)

修复的办法也不是没有,我们用一个that变量首先捕获this:

'use strict';var xiaoming = {name: '小明',birth: 1990,age: function () {var that = this; // 在方法内部一开始就捕获thisfunction getAgeFromBirth() {var y = new Date().getFullYear();return y - that.birth; // 用that而不是this}return getAgeFromBirth();}
};xiaoming.age(); // 25

用var that = this;,你就可以放心地在方法内部定义其他函数,而不是把所有语句都堆到一个方法中。

apply

虽然在一个独立的函数调用中,根据是否是strict模式,this指向undefined或window,不过,我们还是可以控制this的指向的!

要指定函数的this指向哪个对象,可以用函数本身的apply方法,它接收两个参数,第一个参数就是需要绑定的this变量,第二个参数是Array,表示函数本身的参数。

用apply修复getAge()调用:

function getAge() {var y = new Date().getFullYear();return y - this.birth;
}var xiaoming = {name: '小明',birth: 1990,age: getAge
};xiaoming.age(); // 25
getAge.apply(xiaoming, []); // 25, this指向xiaoming, 参数为空

另一个与apply()类似的方法是call(),唯一区别是:

apply()把参数打包成Array再传入;

call()把参数按顺序传入。

比如调用Math.max(3, 5, 4),分别用apply()和call()实现如下:

Math.max.apply(null, [3, 5, 4]); // 5
Math.max.call(null, 3, 5, 4); // 5

对普通函数调用,我们通常把this绑定为null。

装饰器

利用apply(),我们还可以动态改变函数的行为。

JavaScript的所有对象都是动态的,即使内置的函数,我们也可以重新指向新的函数。

现在假定我们想统计一下代码一共调用了多少次parseInt(),可以把所有的调用都找出来,然后手动加上count += 1,不过这样做太傻了。最佳方案是用我们自己的函数替换掉默认的parseInt():

var count = 0;
var oldParseInt = parseInt; // 保存原函数window.parseInt = function () {count += 1;return oldParseInt.apply(null, arguments); // 调用原函数
};// 测试:
parseInt('10');
parseInt('20');
parseInt('30');
count; // 3

转载于:https://www.cnblogs.com/zi-xing/p/9502866.html

js this pointer 指针相关推荐

  1. Golang unsafe.Pointer指针

    相较于 C 而言,Go 语言在设计时为了使用安全给指针在类型和运算上增加了限制,这让Go程序员既可以享受指针带来的便利,又避免了指针的危险性.除了常规的指针外,Go 语言在 unsafe 包里其实还通 ...

  2. Pointer 指针

    Pointer 指针 利用指针访问对象,指针指向一个对象,允许使用解引用符(操作符*)来访问对象int ival = 42; int *p = &ival;//p存放变量ival的内存地址,p ...

  3. plc的指针和c语言指针,关于STEP7 Pointer指针的问题

    buffer声明为pointer输入变量,DB_ID声明为word临时变量 L 最佳答案 1:首先需要了解 POINTER 的结构 POINTER是一个类似于C语言中指向指针的指针 见图1 POINT ...

  4. C++ Pointer指针

    众所周知,C++是一门高级语言,但却是一门比较贴近底层的高级语言,今天,让我们一起来学习一下C++和C语言中最重要的一个语言特性--指针(Pointer) 我自己的C++学习小群(尽管现在只有我一个人 ...

  5. css实现圆形钟表,js+css3圆形指针时钟代码

    js代码 var divH = document.getElementsByClassName("time_h") var divM = document.getElementsB ...

  6. 每天一道面试题--- js 中 this 指针的用法

    普通this指针指向问问题: 1.预编译过程中的this–>window 2.全局作用域中的this–>window 3.一般情况下的this–>调用者(谁调用指向谁): 4.cal ...

  7. JS简单的指针时钟动态效果

    简单的指针时钟动态效果 <!DOCTYPE html> <html> <head> <title>指针时钟</title> <meta ...

  8. 内存管理-定时器循环、内存布局、tagged pointer、weak指针、copy、自动释放池

    先上代码,我们平时用的定时器,cadisplaylink.nstimer,CADisplayLink.NSTimer会对target产生强引用,如果target又对它们产生强引用,那么就会引发循环引用 ...

  9. js请求结果拦截机器_CefSharp请求资源拦截及自定义处理

    前言 在CefSharp中,我们不仅可以使用Chromium浏览器内核,还可以通过Cef暴露出来的各种Handler来实现我们自己的资源请求处理. 什么是资源请求呢?简单来说,就是前端页面在加载的过程 ...

最新文章

  1. 标记meta http-equiv = X-UA-Compatible content = IE=edge,chrome=1
  2. 支付宝现使用故障 官方:不影响用户资金和信息安全
  3. 前端学习 -- 颜色
  4. 运动合成——机器学习技术
  5. 系统I/O小程序-文件拷贝
  6. javaweb成长之路:SSM框架搭建
  7. openstack 云_OpenStack作为云,CoreOS等的未来
  8. 9.特殊矩阵的压缩存储
  9. Cross-lingual Transfer of Correlations between Parts of Speech and Gaze Features 阅读笔记
  10. 词法分析——词法分析器的作用
  11. logo语言是计算机语言吗,LOGO语言的编程
  12. 送书 | 《Python3爬虫实战——数据清洗、数据分析与可视化》
  13. Modem相关知识__2019.12.03
  14. AlphaPose环境配置与测试
  15. VC版学生成绩管理系统
  16. 解决mac右键谷歌翻译失效
  17. MATLAB中regress函数用法(多元线性回归)
  18. php 心跳包检测,redis的对端心跳检测
  19. 区块链app商城软件系统开发浅析
  20. 每日C语言代码(The second day)

热门文章

  1. C#学习路线:C#入门经典 -> CLR VIA C# -> WINDOWS核心编程
  2. malloc与new的区别
  3. 发送IP和MAC地址的方法
  4. java如何压缩html代码,java 压缩html文件
  5. Python---编写一函数 Fabonacci(n),其中参数 n 代表第 n 次的迭代。
  6. mysql 9.0创建数据库_数据库基础学习——MySQL数据库知识小结(9)
  7. 用python实现计算器功能_使用python实现计算器功能
  8. 031_yml配置文件
  9. 006_全局异常处理器
  10. php 配置域名与端口号,lnmp 配置不同端口号的域名