javaScript中的this

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javaScript中的this，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9463字，纯文字阅读大概需要14分钟。

内容图文

this是我们在书写代码时最常用的关键词之一，即使如此，它也是JavaScript最容易被最头疼的关键词。那么this到底是什么呢？

如果你了解执行上下文，那么你就会知道，其实this是执行上下文对象的一个属性：

executionContext = {

scopeChain:[ ... ],

VO:{

...

},

this: ?

}

执行上下文中有三个重要的属性，作用域链(scopeChain)、变量对象(VO)和this。

this是在进入执行上下文时确定的，也就是在函数执行时才确定，并且在运行期间不允许修改并且是永久不变的

在全局代码中的this

在全局代码中this 是不变的，this始终是全局对象本身。

var a = 10;

this .b = 20;

window.c = 30;

console.log( this .a);

console.log(b);

console.log( this .c);

console.log( this === window) // true

// 由于this就是全局对象window，所以上述 a ,b ,c 都相当于在全局对象上添加相应的属性

如果我们在代码运行期尝试修改this的值，就会抛出错误：

1 2	`this` `= { a : 1 } ;` `// Uncaught SyntaxError: Invalid left-hand side in assignment` `console.log(` `this` `=== window)` `// true`

函数代码中的this

在函数代码中使用this，才是令我们最容易困惑的，这里我们主要是对函数代码中的this进行分析。

我们在上面说过this的值是，进入当前执行上下文时确定的，也就是在函数执行时并且是执行前确定的。但是同一个函数，作用域中的this指向可能完全不同，但是不管怎样，函数在运行时的this的指向是不变的，而且不能被赋值。

function foo() {

console.log( this );

}

foo(); // window

var obj={

a: 1,

bar: foo,

}

obj.bar(); // obj

函数中this的指向丰富的多，它可以是全局对象、当前对象、或者是任意对象，当然这取决于函数的调用方式。在JavaScript中函数的调用方式有一下几种方式：作为函数调用、作为对象属性调用、作为构造函数调用、使用apply或call调用。下面我们将按照这几种调用方式一一讨论this的含义。

作为函数调用

什么是作为函数调用：就是独立的函数调用，不加任何修饰符。

function foo(){

console.log( this === window); // true

this .a = 1;

console.log(b); // 2

}

var b = 2;

foo();

console.log(a); // 1

上述代码中this绑定到了全局对象window。this.a相当于在全局对象上添加一个属性 a 。

在严格模式下，独立函数调用，this的绑定不再是window，而是undefined。

function foo() {

"use strict" ;

console.log( this ===window); // false

console.log( this ===undefined); // true

}

foo();

这里要注意，如果函数调用在严格模式下，而内部代码执行在非严格模式下，this 还是会默认绑定为 window。

function foo() {

console.log( this ===window); // true

}

( function () {

"use strict" ;

foo();

})()

对于在函数内部的函数独立调用 this 又指向了谁呢？

function foo() {

function bar() {

this .a=1;

console.log( this ===window); // true

}

bar()

}

foo();

console.log(a); // 1

上述代码中，在函数内部的函数独立调用，此时this还是被绑定到了window。

总结：当函数作为独立函数被调用时，内部this被默认绑定为(指向)全局对象window，但是在严格模式下会有区别，在严格模式下this被绑定为undefined。

作为对象属性调用

var a=1;

var obj={

a: 2,

foo: function () {

console.log( this ===obj); // true

console.log( this .a); // 2

}

obj.foo();

上述代码中 foo属性的值为一个函数。这里称 foo 为对象obj 的方法。foo的调用方式为 对象 . 方法 调用。此时 this 被绑定到当前调用方法的对象。在这里为 obj 对象。

再看一个例子：

var a=1;

var obj={

a: 2,

bar: {

a: 3,

foo: function () {

console.log( this ===bar); // true

console.log( this .a); // 3

}

obj.bar.foo();

遵循上面说的规则 对象 . 属性 。这里的对象为 obj.bar 。此时 foo 内部this被绑定到了 obj.bar 。因此 this.a 即为 obj.bar.a 。　　

再来看一个例子：　

var a=1;

var obj={

a: 2,

foo: function () {

console.log( this ===obj); // false

console.log( this ===window); // true

console.log( this .a); // 1

}

var baz=obj.foo;

baz();

这里 foo 函数虽然作为对象obj 的方法。但是它被赋值给变量 baz 。当baz调用时，相当于 foo 函数独立调用，因此内部 this被绑定到 window。

使用apply或call调用

apply和call为函数原型上的方法。它可以更改函数内部this的指向。

var a=1;

function foo() {

console.log( this .a);

}

var obj1={

a: 2

}

var obj2={

a: 3

}

var obj3={

a: 4

}

var bar=foo.bind(obj1);

bar(); // 2 this => obj1

foo(); // 1 this => window

foo.call(obj2); // 3 this => obj2

foo.call(obj3); // 4 this => obj3

当函数foo 作为独立函数调用时，this被绑定到了全局对象window，当使用bind、call或者apply方法调用时，this 被分别绑定到了不同的对象。　　

作为构造函数调用

var a=1;

function Person() {

this .a=2; // this => p;

}

var p=new Person();

console.log(p.a); // 2

上述代码中，构造函数 Person 内部的 this 被绑定为 Person的一个实例。

总结：

当我们要判断当前函数内部的this绑定，可以依照下面的原则：

函数是否在是通过 new 操作符调用？如果是，this 绑定为新创建的对象

1	`var` `bar =` `new` `foo();` `// this => bar;`

函数是否通过call或者apply调用？如果是，this 绑定为指定的对象

1 2	`foo.call(obj1);` `// this => obj1;` `foo.apply(obj2);` `// this => obj2;`

函数是否通过 对象 . 方法调用？如果是，this 绑定为当前对象

1	`obj.foo();` `// this => obj;`

函数是否独立调用？如果是，this 绑定为全局对象。

1	`foo();` `// this => window`

DOM事件处理函数中的this

1). 事件绑定

<button id= "btn" >点击我</button>

// 事件绑定

function handleClick(e) {

console.log( this ); // <button >点击我</button>

}

document.getElementById( ‘btn‘ ).addEventListener( ‘click‘ ,handleClick, false ); // <button >点击我</button>

document.getElementById( ‘btn‘ ).onclick= handleClick; // <button >点击我</button>

根据上述代码我们可以得出：当通过事件绑定来给DOM元素添加事件，事件将被绑定为当前DOM对象。

2).内联事件

<button onclick= "handleClick()" id="btn1">点击我</button>

<button onclick= "console.log(this)" id="btn2">点击我</button>

function handleClick(e) {

console.log( this ); // window

}

//第二个 button 打印的是 <button >点击我</button>

我认为内联事件可以这样理解：

//伪代码

<button onclick= function (){ handleClick() } id= "btn1" >点击我</button>

<button onclick= function () { console.log( this ) } id= "btn2" >点击我</button>

这样我们就能理解上述代码中为什么内联事件一个指向window，一个指向当前DOM元素。（当然浏览器处理内联事件时并不是这样的）

定时器中的this

定时器中的 this 指向哪里呢？

function foo() {

setTimeout( function () {

console.log( this ); // window

},1000)

}

foo();

再来看一个例子

var name="chen";

var obj={

name: "erdong" ,

foo: function () {

console.log( this .name); // erdong

setTimeout( function () {

console.log( this .name); // chen

},1000)

}

obj.foo();

到这里我们可以看到，函数 foo 内部this指向为调用它的对象，即：obj 。定时器中的this指向为 window。那么有什么办法让定时器中的this跟包裹它的函数绑定为同一个对象呢？

1). 利用闭包：

var name="chen";

var obj={

name: "erdong" ,

foo: function () {

console.log( this .name)

var that=this;

setTimeout( function () {

console.log(that.name); // window

},1000)

}

obj.foo();

利用闭包的特性，函数内部的函数可以访问含义访问当前词法作用域中的变量，此时定时器中的 that 即为包裹它的函数中的 this 绑定的对象。在下面我们会介绍利用 ES6的箭头函数实现这一功能。

当然这里也可以适用bind来实现：

var name="chen";

var obj={

name: "erdong" ,

foo: function () {

console.log( this .name);

setTimeout( function () {

console.log( this .name); // window

}.bind( this ),1000)

}

obj.foo();

被忽略的this

如果你把 null 或者 undefined 作为 this 的绑定对象传入 call 、apply或者bind，这些值在调用时会被忽略，实例 this 被绑定为对应上述规则。

var a=1;

function foo() {

console.log( this .a); // 1 this => window

}

var obj={

a: 2

}

foo.call( null );

var a=1;

function foo() {

console.log( this .a); // 1 this => window

}

var obj={

a: 2

}

foo.apply( null );

var a=1;

function foo() {

console.log( this .a); // 1 this => window

}

var obj={

a: 2

}

var bar = foo.bind(null);

bar();

bind 也可以实现函数柯里化：

function foo(a,b) {

console.log(a,b); // 2 3

}

var bar=foo.bind(null,2);

bar(3);

更复杂的例子：　　

var foo={

bar: function () {

console.log( this );

}

};

foo.bar(); // foo

(foo.bar)(); // foo

(foo.bar=foo.bar)(); // window

( false ||foo.bar)(); // window

(foo.bar,foo.bar)(); // window

上述代码中：

foo.bar()为对象的方法调用，因此 this 绑定为 foo 对象。

(foo.bar)() 前一个() 中的内容不计算，因此还是 foo.bar()

(foo.bar=foo.bar)() 前一个 () 中的内容计算后为 function() { console.log(this); } 所以这里为匿名函数自执行，因此 this 绑定为全局对象 window

后面两个实例同上。

这样理解会比较好：

(foo.bar=foo.bar) 括号中的表达式执行为先计算，再赋值，再返回值。

( false ||foo.bar)() 括号中的表达式执行为判断前者是否为 true ，若为true，不计算后者，若为false，计算后者并返回后者的值。

(foo.bar,foo.bar)   括号中的表达式之行为分别计算 &ldquo;，&rdquo; 操作符两边，然后返回  &ldquo;，&rdquo; 操作符后面的值。

箭头函数中的this

箭头函数时ES6新增的语法。

有两个作用：

更简洁的函数
本身不绑定this

代码格式为：

// 普通函数

function foo(a){

// ......

}

//箭头函数

var foo = a => {

// ......

}

//如果没有参数或者参数为多个

var foo = (a,b,c,d) => {

// ......

}

我们在使用普通函数之前对于函数的this绑定，需要根据这个函数如何被调用来确定其内部this的绑定对象。而且常常因为调用链的数量或者是找不到其真正的调用者对 this 的指向模糊不清。在箭头函数出现后其内部的 this 指向不需要再依靠调用的方式来确定。

箭头函数有几个特点(与普通函数的区别)

箭头函数不绑定 this 。它只会从作用域链的上一层继承 this。
箭头函数不绑定arguments，使用reset参数来获取实参的数量。
箭头函数是匿名函数，不能作为构造函数。
箭头函数没有prototype属性。
不能使用 yield 关键字，因此箭头函数不能作为函数生成器。

这里我们只讨论箭头函数中的this绑定。

用一个例子来对比普通函数与箭头函数中的this绑定：

var obj={

foo: function () {

console.log( this ); // obj

},

bar: () => {

console.log( this ); // window

}

obj.foo();

obj.bar();

上述代码中，同样是通过对象 . 方法调用一个函数，但是函数内部this绑定确是不同，只因一个数普通函数一个是箭头函数。

用一句话来总结箭头函数中的this绑定：

个人上面说的它会从作用域链的上一层继承 this ，说法并不是很正确。作用域中存放的是这个函数当前执行上下文与所有父级执行上下文的变量对象的集合。因此在作用域链中并不存在 this 。应该说是作用域链上一层对应的执行上下文中继承 this 。

箭头函数中的this继承于作用域链上一层对应的执行上下文中的this

var obj={

foo: function () {

console.log( this ); // obj

},

bar: () => {

console.log( this ); // window

}

obj.bar();

上述代码中obj.bar执行时的作用域链为：

scopeChain = [

obj.bar.AO,

global.VO

]

根据上面的规则，此时bar函数中的this指向为全局执行上下文中的this，即：window。

再来看一个例子：

var obj={

foo: function () {

console.log( this ); // obj

var bar=() => {

console.log( this ); // obj

}

bar();

}

obj.foo();

在普通函数中，bar 执行时内部this被绑定为全局对象，因为它是作为独立函数调用。但是在箭头函数中呢，它却绑定为 obj 。跟父级函数中的 this 绑定为同一对象。

此时它的作用域链为：

scopeChain = [

bar.AO,

obj.foo.AO,

global.VO

]

这个时候我们就差不多知道了箭头函数中的this绑定。

继续看例子：

var obj={

foo: () => {

console.log( this ); // window

var bar=() => {

console.log( this ); // window

}

bar();

}

obj.foo();

这个时候怎么又指向了window了呢？

我们还看当 bar 执行时的作用域链：

scopeChain = [

bar.AO,

obj.foo.AO,

global.VO

]

当我们找bar函数中的this绑定时，就会去找foo函数中的this绑定。因为它是继承于它的。这时 foo 函数也是箭头函数，此时foo中的this绑定为window而不是调用它的obj对象。因此 bar函数中的this绑定也为全局对象window。

我们在回头看上面关于定时器中的this的例子：

var name="chen";

var obj={

name: "erdong" ,

foo: function () {

console.log( this .name); // erdong

setTimeout( function () {

console.log( this ); // chen

},1000)

}

obj.foo();

这时我们就可以很简单的让定时器中的this与foo中的this绑定为同一对象:　

var name="chen";

var obj={

name: "erdong" ,

foo: function() {

console.log( this .name); // erdong

setTimeout(() => {

console.log( this .name); // erdong

},1000)

}

obj.foo();

原文：https://www.cnblogs.com/tommymarc/p/13042055.html

内容总结

以上是互联网集市为您收集整理的javaScript中的this全部内容，希望文章能够帮你解决javaScript中的this所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1205671.html

来源：【匿名】

【下一篇】JAVA/JSP学习系列之五

更多 ►

【javaScript中的this】教程文章相关的互联网学习教程文章

this是我们在书写代码时最常用的关键词之一，即使如此，它也是JavaScript最容易被最头疼的关键词。那么this到底是什么呢？如果你了解执行上下文，那么你就会知道，其实this是执行上下文对象的一个属性：1234567executionContext = { scopeChain:[ ... ], VO:{ ... }, this: ?}执行上下文中有三个重要的属性，作用域链(scopeChain)、变量对象(VO)和this。this是在进入执行上下文时确定的，也就是在函数执行时才...

JavaScript 参考教程

JavaScript 是使用“对象化编程”的，或者叫“面向对象编程”的。所谓“对象化编程”，意思是把 JavaScript 能涉及的范围划分成大大小小的对象，对象下面还继续划分对象直至非常详细为止，所有的编程都以对象为出发点，基于对象。小到一个变量，大到网页文档、窗口甚至屏幕，都是对象。这一章将“面向对象”讲述 JavaScript 的运行情况。对象的基本知识对象是可以从 JavaScript“势力范围”中划分出来的一小块，可以是一段文字、...

Java8按某个字段排序【代码】

1 @Test2publicvoid sorted() {3 EmployDO emp = EmployDO.builder().age("18").name("张小华").sex("男").position("服务员").build();4 EmployDO emp2 = EmployDO.builder().age("20").name("张松月").sex("女").position("服务员").build();5 EmployDO emp3 = EmployDO.builder().age("30").name("李桂芝").sex("女").position("服务员").build();6 EmployDO emp4 = EmployDO.builder().age(...

Tomcat 启动时 java.lang.NullPointerException

今天工程启动时一直报错java.lang.NullPointerException at org.apache.struts.action.ActionServlet.parseModuleConfigFile(ActionServlet.java:1003) at org.apache.struts.action.ActionServlet.initModuleConfig(ActionServlet.java:955)...后来发现时spring的web.xml中配置了一个不存在的struts-config.xml路径导致的，简单删掉重新启动，OK。原文：http://www.cnblogs.com/lckblog/p/4036883.html

java多态性理解【代码】

一多态的基础是继承,重写,父类的引用指向子类对象,接口是多态最常见的实现方式。概念性的东西，先说这么多，以上的都是重点，继承，重写，父类的引用指向子类对象。下面贴上代码，一步步来看到底什么是多态。父类动物类，然后会有Dog和Cat类继承此类public class DongWu { public void eat(){System.out.println("动物会吃东西");}public void age(){System.out.println("动物的年龄");}}Dog类public class Dog extends ...

归并排序java【代码】

1import java.util.Arrays;2 3 4publicclass MergeSort {5 6publicstaticvoid main(String[] args) {7 MergeSort ms=new MergeSort();8int[] arr={5,44,32,4,566,67,23};9 ms.merge(arr, 0, arr.length-1); 10 System.out.println(Arrays.toString(arr)); 11 } 1213void merge(int[] arr,int start,int end ) 14 { 15if(start==end) 16return ; 17int mid=(start+end)/2; 18 merge(arr,start...

《Java并发编程实战》笔记-Happens-Before规则

Happens-Before规则程序顺序规则。如果程序中操作A在操作B之前，那么在线程中A操作将在B操作之前执行。监视器锁规则。在监视器锁上的解锁操作必须在同一个监视器锁上的加锁操作之前执行。volatile变量规则。对volatile变量的写入操作必须在对该变量的读操作之前执行。线程启动规则。在线程上对Thread.start的调用必须在该线程中执行任何操作之前执行。线程结束规则。线程中的任何操作都必须在其他线程检测到该线程已经结束之前执行...

[刘阳Java]_TortoiseSVN基础应用_第1讲

TortoiseSVN是一个免费的SVN客户端，非常好用。这里我们介绍一下TortoiseSVN基础应用。下面的内容是转载博客园的某兄弟写的，个人觉得很不错。所以尊重转载的这篇文章，必须要给出这篇博客的地址：http://www.cnblogs.com/lcyuhe/p/4539702.html这篇文章介绍的内容如下：添加文件修改文件重命名文件删除文件版本冲突解决重置密码原文：http://www.cnblogs.com/liuyangjava/p/7254090.html

java的一些基础知识

一．Java基础1.抽象类和interface有什么区别？答：抽象类：单继承，可以有非抽象方法，也可以没有抽象方法，有普通方法，有构造方法接口：多继承，只有抽象方法、没有构造函数，成员变量必须是static final类型的2.request与session的区别？Session在整个会话期间有效，而request一次请求的全过程中有效3.String 与StringBuffer的区别？String 一旦创建就不可以改变而StringBuffer创建之后还可以改变4.尽量多的列举常用的Map家族与...

java虚拟机之垃圾收集器与内存分配策略【图】

哪些内存需要回收？　　　　java内存运行时区域的各个部分，其中程序计数器，虚拟机栈，本地方法栈3个区域随线程而生，随线程而灭，栈中的栈帧随着方法的进入和退出而有条不絮的执行着出栈和入栈操作。每一个栈帧中分配多少内存基本上是在类结构确定下来时就已知的。因此这几个区域的内存分配和回收都具有确定性，所以这部分不需要过多考虑内存回收。但是方法区和堆不一样，一个接口中的多个实现类需要的内存可能不一样，一个方法中...

javaEE之-------统计网站刷新量

每个网站都有自己的统计访问量，但是少不了服务器会出现意外情况，（如断电。。）所以就需要我们在网站挂机的前段时间将这个数据存起来。我们就需要用到网站最大的容器，application,我们采用观察者设计模式实现ServletContextListener接口。然后在销毁之前将这个数据存起来ps:属于点点知识，大牛请绕道。开发步骤：第一步：实现ServletContextListener接口。第二步：实现两个方法。contextInitializedcontextDestroyed第三步：在w...

java遍历文件目录

参考地址：http://blog.csdn.net/huang_xw/article/details/7058296【遍历文件目录】public void printFileList(File file, int count){if (file.isDirectory()) {System.out.println(printTab(count) + "-" + file.getName());File[] files = file.listFiles();for (int i = 0; i < files.length; i++) {printFileList(files[i], count + 1);}}else {System.out.println(printTab(count) + "-" + file.getName());}}public String...

java ,CRC(8005型，x16+x15+x2+1)

/** * CRC16相关计算 CRC-16 x16+x15+x2+1 8005 IBM SDLC * encode: utf-8 * * @author trb * @date 2014-12-25 */ public class CRC16 { static byte[] crc16_tab_h = { (byte) 0x00, (byte) 0xC1, (byte) 0x81, (byte) 0x40, (byte) 0x01, (byte) 0xC0, (byte) 0x80, (byte) 0x41, (byte) 0x01, (byte) 0xC0, (byte) 0x80, (byte) 0x41, (byte) 0x00, (byte) 0xC1, (byte) 0x81, (byte) 0x40,...

JAVA解压ZIP文件

import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.util.Enumeration; import java.util.zip.ZipEntry; import java.util.zip.ZipException; import java.util.zip.ZipFile;public class ZipUtil {public static void unzip(String zipFile){// 要解压文件路径File file = ...

java使用poi实现大数据量导出为EXCEL【代码】

总体的实现思想为：每次查询出2w数据，并写入到临时文件然后把这些文件写入到一个EXCEL里边，或者把这些文件压缩为zip文件，然后把Zip文件提供给下载(这里使用zip打包是因为，在Linux上也能进行Zip打包)。//这个zip打包工具类 package net.szh.zip; import java.io.File; import org.apache.tools.ant.Project; import org.apache.tools.ant.taskdefs.Zip; import org.apache.tools.ant.types.FileSet; public ...

JAVA - 技术教程分类

Java 教程 Java 简介 Java 开发环境配置 Java 基础语法 Java 对象和类 Java 基本数据类型 Java 变量类型 Java 修饰符 Java 运算符 Java 循环结构 Java 条件语句 Java switch case Java Number & Math 类 Java Character 类 Java String 类 Java StringBuffer Java 数组 Java 日期时间 Java 方法 Java Stream、File、IO Java Scanner 类 Java 异常处理 Java 继承 Java Override/Overload Java 多态 Java 抽象类 Java 封装 Java 接口 Java 枚举 Java 包(package) Java 数据结构 Java 集合框架 Java ArrayList Java LinkedList Java HashSet Java HashMap Java Iterator Java Object Java 泛型 Java 序列化 Java 网络编程 Java 多线程编程 Java Applet 基础 Java 文档注释 Java 实例 Java 8 新特性 Java MySQL 连接 Java 9 新特性 Java 测验 java 全部

JAVA - 最热教程

Java在运行项目时候，点击右键的弹框，...nacos配置中心超时问题：java.net.Conn...Java的设计模式（7）— 生产者-消费者模...基于DOM4j和POI实现的XML文件转换为XLS...如何在Java中创建一些变量类型别名使用java8的Stream统计字符串数组中每一...idea插件篇之java内存分析工具(JProfil...cannot cast 'java.lang.Integer' to '...java – Bootstrap.properties中Spring...Java8利用stream流实现数字排序和中文排...

首页 / JAVA / javaScript中的this

javaScript中的this

内容导读

内容图文

在全局代码中的this

函数代码中的this

作为函数调用

作为对象属性调用

使用apply或call调用

作为构造函数调用

DOM事件处理函数中的this

定时器中的this

被忽略的this

箭头函数中的this

内容总结

内容备注

内容手机端

【javaScript中的this】教程文章相关的互联网学习教程文章