JS中的this指向相关

关于JS中this的问题

JS中的函数调用有4种方式：

1、作为普通函数调用

2、作为对象方法调用

3、作为构造函数调用

4、使用call或者apply

全局执行：

首先，我们尝试全局执行下console.log(this);

浏览器会输出window对象

注意，如果在严格模式下执行'use strict'，则输出的会是undefined

第一种情况：作为普通函数调用

function a(){this.name = '张三';console.log(this.name);console.log(this);}a();console.log(name);//张三//window//张三//这里的this指向的是全局window对象，name为定义的全局变量//换一种写法var name = '张三';function a(){var name = '李四';console.log(this.name);}a();//张三//同样，这里的this.name指向的也是全局对象name//再换一种写法var name = '张三';function a(){this.name = '李四';}a();console.log(name);//李四

第二种情况：作为对象方法调用

var name = '张三';var person = {name : '李四',showName : function(){console.log(this.name);}}person.showName();//李四//这里this指向的是person//再执行两句话var other = person.showName;other();//张三//这里other属于全局对象，等同于window.other，this是在执行时绑定它的作用域，所以这里的this表示window对象//注意setTimeout的一些坑var person = {fun1 : function(){console.log(this);},fun2 : function(){setTimeout(this.fun1, 1000);}}person.fun2();//在这种情况下，会输出window对象//可以理解为setTimeout本身也是一个函数，等同于window.setTimeout，因此，这里的this是在执行的时候绑定它的作用域，则为window//解决办法var person = {fun1 : function(){console.log(this);},fun2 : function(){var _this = this;setTimeout(function(){console.log(this);console.log(_this);}, 1000);}}//window//personperson.fun2();//通过定义一个_this来存储this的指向

第三种情况：作为构造函数调用

function Person(){this.name = '张三';}var a = new Person();console.log(a.name);//张三//使用new关键字生成的对象，会将构造函数中的this作用域绑定在该对象上面

第四种情况：使用call或者apply

var a = {name : '张三'}function foo(){console.log(this);}foo.call(a);//Object{name : '张三'}//在执行foo.call(a)的时候，函数内部的this指向了a这个对象