this指针问题与箭头函数

阅读目录

1. 对this的理解
2. 浏览器环境
3. Node.js环境
4. 箭头函数
   • 箭头函数的this指针问题
   • 箭头函数的其他特性

 

---

回到顶部

对this的理解

　　this关键字时函数运行时自动生成的一个内部对象，它指向函数的直接调用者。this不能在执行期间被赋值，可以通过Function.prototype.bind()来修改函数的this指针，调用bind()会创建一个新的函数副本，这个新函数的this指针将永久地绑定在bind()的第一个参数上。

 

回到顶部

浏览器环境

1.全局上下文

　　在全局执行环境中，无论是严格模式还是非严格模式，this都指向全局对象window。

2.函数上下文

　　在非严格模式，this指向全局对象window；在严格模式，this为undefined。

3.类上下文

　　在构造函数中，当调用new关键字时会将this绑定到正在构造的新对象上；

　　当作为某个对象的方法时，该函数的this指针指向这个对象。

 

回到顶部

Node.js环境

　　在node.js环境下，每一个.js文件其实都是一个模块（可以理解为将文件内所有代码封装到一个函数中去）。这样，可以实现作用域隔离，多个模块即使使用相同变量名也不会造成冲突。

/*main.js*/
var a = 1;
function f(){}

/*相当于*/
function ...(exprots,require,module,__filename,__dirname){
    var a = 1;
    function f(){};
}
/*
exports：用来将变量或函数暴露到外部的对象
require：函数，用来引入外部模块
module：当前模块本身，其中exports是它的一个属性

 

1.全局上下文

　　在全局执行环境中，this指向module.exports。

console.log(module.exports===this); //true

2.函数上下文

　　this指向global对象。

3.类上下文

　　node.js环境下的类上下文中的this指针同浏览器环境。

 

回到顶部

箭头函数

箭头函数的this指针问题

　　对于箭头函数，它自身并不提供this指针。箭头函数在创建时，便将this指针绑定到它的封闭词法环境中(创建箭头函数的环境，也即箭头函数作用域的上一层)，可以认为“箭头函数的this关键字是编译时创建的对象”。而且，通过call()、apply()或bind()方法调用箭头函数时，是不允许修改this的，因此它们的第一个参数会被忽略。

　　因此，一般来说，箭头函数用作非方法函数（不作为类或对象的方法）比较合适。

let obj = {a:1}
obj.f1 = function (){
    console.log(this)
}
obj.f2 = ()=>{
    console.log(this)
}
obj.f1(); //this输出为obj对象{ a: 1, f: [Function (anonymous)] }
obj.f2(); //this输出为window

箭头函数的其他特性

• 箭头函数不绑定arguments对象，同this关键字一样，它的arguments只是引用了封闭词法环境中的arguments
• 箭头函数不能用作构造器，因此和new关键字一起使用会抛出错误；
• 箭头函数没有prototype属性