js中this的指向

JS中this的指向

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

在javaScript中，this是动态绑定的，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。

< mark >在绝大多数情况下，函数的调用方式决定了this的值,this指向调用函数的对象 </ mark >

this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。ES5引入了bind方法来设置函数的this值，

而不用考虑函数如何被调用的，ES2015 引入了支持this词法解析的箭头函数（它在闭合的执行上下文内设置this的值）。

2.知识剖析

由一个简单的对象，引入全局对象。

无论是否在严格模式下，在全局执行上下文中（在任何函数体外部）this 都指代全局对象。

this指向在函数定义的时候是确定不了的，只有函数被调用的时候才能够确定,实际上this的最终指向的是

            那个调用它的对象

this的常见的四种情形

1、 纯粹的作为函数调用：全局函数中，this指向window

2、作为对象方法的调用：当函数被作为某个对象的方法调用时，this就是那个对象

3、闭包中的this指向的是什么？指向的是window对象

4、apply、call调用：this指向改变后的调用这个函数的对象

作为构造函数调用：this指向新对象

1、全局环境中的this

< pre >

< code >

function a(){

console.log(this);

}

a();

</ code >

</ pre >

这里调用了a函数，而a函数的执行环境是全局环境，这里的this也就指向了全局变量window。

严格模式 ‘use strict’下的this

< pre >

< code >

'use strict';

function a(){

this.user = "hello";

console.log(this);

console.log(this.user);

}

a();

console.log(user)

</ code >

</ pre >

在严格模式下，在全局环境中执行函数调用的时候

this 并不会指向 window 而是会指向 undefined。如果不用严格模式，可能你不知不觉中就定义了几个全局变量。

2.如果函数作为一个对象的属性方法，并且被调用的时候，this 就指向这个对象。

< pre >

< code >

var name = '火影';

var person = {

name: '水影',

sayName: function() {

console.log(this.name);

}

};

var sayNameWin = person.sayName;

person.sayName(); //水影

sayNameWin(); //火影 作为 window 的方法被调用的

</ code >

</ pre >

3.作为构造函数被调用的时候，this 代表它即将 new 出来的对象

< pre >

< code >

function Person(name) {

this.name = name;

console.log(this);

}

var person = new Person('张飒');

console.log(person.name); //张飒

</ code >

</ pre >

注：构造函数不使用new调用，则和普通函数一样。一般地，构造函数首字母大写

如果不加 new,表示即作为普通函数调用，指向 window

< pre >

< code >

function Person(name) {

this.name = name;

console.log(this); //window

}

Person('水影');

console.log(window.name); //水影

</ code >

</ pre >

4.作为 call/apply/bind 方法的调用

作为 call/apply/bind 方法被调用的时候指向传入的值

< pre >

< code >

var person = {

name: '人才'

};

function fn() {

console.log(this); //Object {name: "人才"}

console.log(this.name); //人才

}

fn.apply(person);

</ code >

</ pre >

3、常见问题

s etTimeout、setInterval中的this是指向哪里？

     s etTimeout、setInterval中的this再实际调用的时候this指向全局Window的对象

4、解决方案

javascript 高级程序设计》中写到：“超时调用的代码都是在全局执行域中执行的”。

            setTimeout/setInterval 执行的时候，this 默认指向 window 对象，除非手动改变 this 的指向。

< pre >

< code >

var name = '土影';

function Person(){

this.name = '火影';

this.sayName=function(){

console.log(this); //window

console.log(this.name); //火影

};

setTimeout(this.sayName, 10);

}

var person=new Person();

</ code >

</ pre >

5、编码实战

6.扩展思考

如何改变this的指向？

可以使用call或者apply的方法

< pre>

< code >

// 一个对象可以作为call和apply的第一个参数，并且this会被绑定到这个对象。

var obj = {name: 'bob'};

// 这个属性是在global对象定义的。

var name = 'jac';

function foo() {

console.log(this.name) // this的值取决于函数的调用方式

}

foo(); // 'jac'

foo.call(obj); // 'bob'

foo.apply(obj); // 'bob'

</ code >

</ pre >

7.参考文献

                    深入浅出的认识this

                    如何理解js中的this关键字

< h3 >8、更多讨论 </ h3 >

<!--<p><a href="http://www.imooc.com/article/1848">资料链接</a></p>-->

3个问题：

1、

如何改变this的指向？

可以使用call或者apply的方法

2、

setTimeout、setInterval中的this是指向哪里？

s etTimeout、setInterval中的this再实际调用的时候this指向全局Window的对象

3、

箭头函数的this指向哪里？

箭头函数：根据所在的环境（我再哪个环境中，this就指向谁）