🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# this this的指向主要分为以下几种情况: 1. 在全局作用域中,指向全局 ```javascript console.log(this); // Window ``` 2. 在函数内部定义,并且直接调用函数时。或者在非严格模式下调用匿名函数。 ```javascript (function () { console.log(this); })() function f() { console.log(this); } f() // 都输出Window ``` 但是应注意,匿名函数在严格模式下,输出undefined ```javascript (function () { 'use strict' console.log(this); // undefined })() ``` 3. 作为对象调用,this指向调用的对象 ```javascript var obj = { name: 'sky', foo: function () { console.log(this.name); } } obj.foo(); // 'sky' ``` 但是如果将方法赋值给一个变量然后调用,等同于第2种情况。 ```javascript var obj = { name: 'sky', foo: function () { console.log(this); } } var test = obj.foo; test(); // window or global ``` 4. 使用new作为构造函数使用时。this指向构造出来的对象。 ```javascript function Person(name) { this.name = name; console.log(this); } const A = new Person('AAA'); // 这里输出Person { name: 'AAA' } ``` 但是我们也知道,在本例子中,Person也只是一个普通函数而已,所以,如果这样调用, ```javascript function Person(name) { this.name = name; console.log(this); } const A = Person('AAA'); // 这里指向window ``` 同时 还有一种形式 如果Person返回一个对象,this指向返回的对象。 ```javascript function Person(name) { this.name = name; return { name: 'DDD' } } const A = new Person('AAA'); console.log(A.name);// DDD ``` 这里附加一下new的一个实现: ~~~ var new2 = function (func) { var o = Object.create(func.prototype); var k = func.call(o); if (typeof k === 'object') { return k; } else { return o; } } ~~~ 5. call bind apply 这里单独作为一个章节写了。 6. 箭头函数 > 首先,箭头函数是不可以作为构造函数使用的! 箭头函数的this是指向他定义时所在的定义域,不是指向运行时所在的作用域的。同时,使用bind call apply都无法改变其this指向。 ```javascript var obj = { name: 'sky', foo: function () { setTimeout(() => { console.log(this.name); // "sky" }, 1000); } } obj.foo(); ```