javascript 的 this 指向问题

函数中 的this 指向问题

我们这来讨论的是 es6 之前的 ECMAscript

讨论这个问题首先要明确一点，函数中的 this 指向跟函数的调用有关系，所以 this 指向 只看函数是如何调用的就ok了(不用管函数是如何声明的)

函数的四种调用模式

函数调用模式

函数中的 this 指向 全局对象 window(在浏览器环境中)

Syntax:

• 函数名 + 小括号

function demo (){    console.log(this);}// 回调函数也是一样的,this 指向只看函数如何被调用的function demo2(callback){    callback();}demo(); //Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}demo2(function(){console.log(this)}); // VM39:9 Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

• (function(){})() 立即执行函数

;(function(){    console.log(this);})();//Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

方法调用模式

方法中的 this 指向 调用该方法的对象

Syntax:

• 对象.方法名();

var demoObj = {    name:'kailey',    fn: function () {console.log(this);}}demoObj.fn(); // {name: "kailey", fn: ƒ}// 回调函数 中还是看函数是如何被调用的function demo2(callback) {    callback();}demo2(demoobj.fn); // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}// 这里只是将堆空间中的地址传给了 callback 这个变量，callback 和 demoObj.fn() 两个函数的调用在栈中的位置不同，但都是堆中 这个函数对象的副本。

构造器模式

this 指向 这个构造器的实例对象

Syntax:

• new + 构造函数

function Person (name,age) {    this.name = name;    this.age = age;}Person.prototype = {    say: function () {        console.log('i am ' + this.name + "今年" + this.age + " 岁！");    }};var person = new Person();console.dir(person);// Person age: undefinedname: undefined__proto__: Object

apply 和 call 调用模式

this 指向 apply或者call的第一个参数

Syntax:

• 函数名.apply(thisArg,[paramsArray]) 或者 函数名.apply(thisArg,paramsLists)
• 参数数组或者参数列表都是可以省略的

function fn () {    console.log(this);}var obj = {    name:'tom',    age: 18,}fn.apply(obj);// {name: "tom", age: 18}

总结：

函数中 this 指向只看函数的调用方式就ok 了

补充

1. 函数是运行在其声明时候的语法环境中，这里语法环境就是函数的作用域，和变量访问有关。
2. 回调函数的作用域问题(声明位置)

    function demo (callback) {    }    demo(function(){}); // 此时的 匿名回调函数 声明的语法环境和 demo 是一致的