博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
理解JavaScript中的this
阅读量:6267 次
发布时间:2019-06-22

本文共 2781 字,大约阅读时间需要 9 分钟。

this关键词是JavaScript语言中一个很重要,同时也是一个非常复杂的机制,它同时也是一个很特殊的关键词,它一般会被自动定义在函数的作用域中。不少很有经验的开发者也经常会被this的指向搞晕,当开发者搞不清楚它的指向的时候,内心的感受实际上差不多是这个样子:

接下来我们将会具体讨论
this关键词到底指向什么。

this的绑定规则

首先明确一点,this的绑定和函数的声明位置是没有任何关系的,它只取决于函数的调用位置和调用方式。

1. 默认绑定

首先我们先看一下最常见的也是最简单的函数调用,全局中的独立的函数调用:

var a = 'hello';function foo() {  console.log(this.a);}foo();// "hello"复制代码

众所周知,声明在全局作用域中的变量,就是全局对象(window或者global)的一个同名的属性,在本例中,this.a被解析成了全局变量a,而函数foo就是在直接在全局对象下、不带有任何修饰地进行调用的,所以,this的默认绑定规则就是指向全局对象。但是,当我们使用严格模式(strict)进行开发的时候,情况发生了变化

"use strict";var a = 'hello';function foo() {  console.log(this.a);}foo();// undefined复制代码

在严格模式下,this被禁止绑定到全局对象中,所以在本例中,this指向了undefined

2.作为对象方法的调用

看下面的代码:

var a ="world";var foo = function () {  console.log(this.a);};var obj = {  a:"hello",  b:foo};obj.b(); //"hello"复制代码

本例中,分别在全局对象中定义变量a,和在全局对象中定义属性obj.a,运行结果是this被绑定到了被调用函数所在的对象中,而并非是全局对象中的a,或者你可以说,this指向了该函数的上级对象中。但是严格来说,无论是直接在obj对象中直接定义,还是先在全局对象中定义再添加到obj中,foo函数都并不属于obj对象,然而调用位置会使用obj的上下文来引用函数。简单说,当函数引用有上下文对象时,隐式绑定规则会将函数调用中的this绑定到这个上下文对象中。

3.在构造函数及prototype里的调用

var Foo = function () {  this.a = 'hello';}Foo.prototype.bar = function () {   console.log(this.a);};Foo.prototype.bar2 = function () {   this.bar();};var foo = new Foo();foo.bar2();//"hello"复制代码

本例与上例类似,this在“Foo类”(严格说Foo是应该是构造函数,但一般在开发过程中认为Foo是类,这样有助于在面向对象编程中减少误解)中绑定的是“类”里的共有变量和共有方法。

this隐式绑定丢失

上述的几种应用场景还是非常容易理解的,也是比较符合我们对this字面意义的理解的,相信对JavaScript有过接触和研究的童鞋很快就会掌握。下面将继续介绍几种让人感觉匪夷所思的this绑定丢失。 思考以下代码:

var a = "world";function foo (){   console.log(this.a);}var obj = {  a:"hello",  foo:foo};var bar = obj.foo; //函数别名bar(); //"world"复制代码

代码执行完成后,我们看到this被绑定到了(或者说指向了)全局对象上,而并不是和前几种情况下绑定到obj对象中,这是为啥呢? 虽然barobj.foo的一个引用,但是实际上它引用的是foo函数本身,因此此时bar其实是一个不带任何修饰的函数调用,因此适用于默认绑定情况。 下面再来看看回调函数中this的绑定情况

function foo() {  console.log(this.a);}function do(fnc) {  fnc();};var obj = {  a:2,  foo:foo};var a = "world";do(obj.foo);//"world"复制代码

参数传递其实就是一种隐式赋值,因此传入函数时也会被隐式赋值,所以结果和上一个例子没有区别,即便是将函数传入语言内置的的函数(比如setTimeout())中,结果也是没有区别的,this要么被绑定到全局对象中,要么绑定到undefined。 除此之外,还有一种情况也会修改this,在一些JavaScript库中传入回调函数,可能会强制改变this的绑定,例如在jquery中

$("#some-id").on('click',function () {  console.log(this.id);//"some-id"});复制代码

本例中的this就是被强制改变绑定到了触发事件的DOM元素上。

显式绑定

隐式绑定实际上就是在一个对象的内部包含一个指向函数的属性,并通过这个属性间接地引用属性,从而把this间接地绑定到这个对象上。 我们可以使用callapply两个函数进行显式绑定。它们的第一个参数是一个对象,它们会把这个对象绑定到this,接着在调用函数时指定这个this

var a = "world";function foo() {  console.log(this.a);}var obj = {  a:"hello"};foo.call(obj);//"hello"foo() //"world"复制代码

单纯的实现this绑定的功能的话,callapply是一样的,它们的区别体现在别的参数中。

思考下面的代码:

function foo() {  console.log(this.a);}var obj = {  a:"hello"};function bar() {  foo.call(obj);}bar(); //"hello"setTimeout(bar,500);// "hello"bar.call(window); //"hello",硬绑定的bar不能再修改它的this复制代码

我们创建了函数bar,并且手动在它的内部调用foo.call(obj),因此强制把foothis绑定到obj,之后无论怎么调用函数bar,它总会在obj上调用foo,不会丢失,这种绑定方式被称为硬绑定.

转载地址:http://zwcpa.baihongyu.com/

你可能感兴趣的文章
[iphone-objective C]去掉一段String中的HTML标签
查看>>
NSArray与NSMutableArray的区别
查看>>
Firefox 9正式发布
查看>>
ADO.NET简介
查看>>
[转]免费开源.net网上商城
查看>>
Android so减包相关
查看>>
linux shell获取用户输入
查看>>
Linux抓包工具
查看>>
js 读写Cookie
查看>>
c哈希表hashtable操作
查看>>
如何维护应用程序状态
查看>>
[Map 3D开发实战系列] Map Resource Explorer 之八--有什么用?怎么用?
查看>>
现代软件工程讲义 8 稳定阶段 (测试的计划和执行)
查看>>
Ubuntu 11.04 安装后要做的20件事情
查看>>
KlayGE 4.0中Deferred Rendering的改进(一):流水线
查看>>
6-4汉诺塔问题
查看>>
【转载】详解SQL2005/SQL2008动态生成分区脚本的方法
查看>>
构建高性能web之路------mysql读写分离实战(转)
查看>>
2012年网页设计趋势2
查看>>
atmega8 例程:INT1外部中断
查看>>