声明,原文摘自野狗公众号,本文只是本人对这篇文章的学习笔记
/***
* js中的this,javascript中的this指向并不是在函数定义的时候确定的,而是在调用的时候确定的额。换句话说,函数的调用方式决定了this的指向。
* js中,普通函数的调用有三种:直接调用、方法调用和new调用。除此之外,还有一些特殊的调用方式,比如通过bind()将函数绑定到对象之后再进行调用、通过call()、apply()进行调用等。而es6引入了箭头函数之后,箭头函数调用时,其this指向又有所不同。
*/
//1直接调用,就是通过函数名(...)的方式调用的,这时候,函数内部的this指向全局对象在浏览器中全局对象是window,在node中全局对象是global
//eg.1.
//简单兼容浏览器和nodejs的全局对象
const _global = typeof window === "undefined" ? global :window;
function test(){
console.log(this === _global);//true
}
test();//直接调用
//eg.2.
(function(_global){
//通过IIFE限定作用域
function test(){
console.log(this === _global);//true
}
test();//非全局作用域下的直接调用
})(typeof window === "undefined" ? global : window);
/**
* // bind()对直接调用的影响
* function.prototype.bind()的作用是将当前函数与指定的对象绑定,并返回一个新函数,这个新函数无论以什么样的方式调用,其this始终指向绑定的对象
*/
//eg.1.
const obj = {};
function test(){
console.log(this === obj,this);
}
const testObj = test.bind(obj);
test(); //false,window
testObj(); //true
/**
* call和apply对this的影响
* 使用apply和call的时候仍然需要注意,如果目录本身是一个绑定了this对象的函数,那apply和call不会像预期那样执行
*/
//eg.1.
const obj = {};
function test(){
console.log(this === obj);
}
//绑定到一个新对象,而不是obj
const testObj = test.bind({});
test.apply(obj); //true
//期望this是obj,即输出true
//但是因为ietestObj绑定了不是obj的对象,所以会输出false
testObj.apply(obj); //false
//由此可见,bind对函数的影响是深远的,慎用!
/***
* 2.方法调用
* 方法调用是指通过对象来调用其方法函数,它是对象.方法函数(...)这样的调用形式。这种情况下,函数中的this指向调用该方法的对象。但是,同样需要注意bind()的影响。
*/
const obj = {
//第一种方式,定义对象的时候定义其方法
test(){
console.log(this === obj);
}
};
//第二种方式,对象定义好之后为其附加一个方法(函数表达式)
obj.test2 = function(){
console.log(this === obj);
}
//第三种方式和第二种方式原理相同
//是对象定义好之后为其附加一个方法(函数定义)
function t(){
console.log(this === obj);
}
obj.test3 = t;
//这也是为对象附加一个方法函数
//但是这个函数绑定了一个不是obj的其他对象
obj.test4 = (function(){
console.log(this === obj);
}).bind({});
obj.test(); //true
obj.test2(); //true
obj.test3(); //true
//受bind()影响,test4中的this指向不是obj,绑定到了新的空对象上,如果绑定到obj上,则为true
obj.test4(); //false
//这里需要注意的是,后三种方式都是预定义函数,在将其附加给obj对象作为其方法。再次强调,函数内部的this指向与定义无关,受调用方式的影响。
/**
* 方法中this指向全局对象的情况
* 注意这里说的是方法中而不是方法调用中。方法中的this指向全局对象,如果不是因为bind(),那就一定是因为不是用的方法调用方式
*/
//eg.1.
const obj = {
test(){
console.log(this === obj,this);
}
};
const t = obj.test;
t(); //false,window
//t就是obj的test方法,但是t()调用时,其中的this指向了全局.
class Handlers{
//这里 $button 假设是一个指向某个按钮的jQuery对象
constructor(data,$button){
this.data = data;
$button.on("click",this.onButtonClick);
}
onButtonClick(e){
console.log(this.data);
}
}
const handlers = new Handlers("string data",$("#someButton"));
//对#someButton 进行点击操作之后
//输出undefined
//但预期是输出string data
//很显然this.onButtonClick作为一个参数传入on()之后,事件触发时,是对这个函数进行的直接调用,而不是方法调用,所以其中的this会指向全局对象。要解决这个问题有很多种方法
//1.这是在es5中的解决方法之一
var _this = this;
$button.on("click",function(){
_this.onButtonClick();
});
//也可以通过bind()来解决
$button.on("click",this.onButtonClick.bind(this));
//es6中可以通过箭头函数来处理,在jQuery中慎用
$button.on("click",e => this.onButtonClick(e));
//不过请注意,将箭头函数用作jQuery的回调时造成要小心函数内对this的使用。jQuery大多数回调函数(非箭头函数)中的this都表示调用目标,所以可以写$(this).text()这样的语句,但jQuery无法改变箭头函数的this指向,同样的语句语义完全不同。
/**
* new调用
*/
//在es6之前,每一个函数都可以当作时构造函数,通过new调用来产生新的对象(函数内无特定返回值的情况下)。而es6改变了这种状态,虽然class定义的类用typeof运算符得到的仍然是"function",但它不能像普通函数一样直接调用;同时,calss中定义的方法函数,也不能当作构造函数用new来调用。
//而在es5中,用new调用一个构造函数,会创建一个新对象,而其中的this就指向这个新对象。这没有什么悬念,因为new本身就是设计来创建新对象的。
//eg.1.
var data = "Hi"; //全局变量
function AClass(data){
this.data = data;
}
var a = new AClass("Hello World");
console.log(a.data); //Hello World
console.log(data); //Hi
var b = new AClass("Hello World"); //new 创建的新对象
console.log(a === b); //false
/**
* 4箭头函数中的this
*/
//先来看看MDN 上对箭头函数的说明
//An arrow function expression has a shorter syntax than a function expression and dose not bind its own this,argumengs,super,or new.target,Arrow functions are always anonymous.These function expressions are best suited for non-method functions,and they cannot be used as constructors.
//这里已经清楚的说明了,箭头函数没有自己的this绑定。箭头函数中使用的this,其实时直接包含它的那个函数或函数表达式中的this。
//eg.1.
const obj = {
test(){
const arrow = () => {
//这里的this时test()中的this,
//由test()的调用方式决定
console.log(this === obj);
};
arrow();
},
getArrow(){ return ()=>{
//这里的this是getArrow()中的this,
//由getArrow()的调用方式决定
console.log(this === obj);
};
}
};
obj.test(); //true
const arrow = obj.getArrow();
arrow(); //true
//示例中的两个this都是由箭头函数的直接外层函数(方法)决定的,而方法函数中的this是由其调用方式决定的。上例的调用方式都是方法调用,所以this都指向方法调用的对象,即obj。
//箭头函数让大家在使用闭包的时候不需要太纠结this,不需要通过像_this这样的局部变量来临时引用this给闭包函数使用。来看一段Babel对函数的转译可能能加深理解:
//ES6
const obj = {
getArrow(){ return() =>{
console.log(this === obj);
};
}
}
//ES5,由Babel转译
var obj = {
getArrow:function getArrow(){
var _this = this; return function(){
console.log(_this === obj);
};
}
}
//另外需要注意的是,箭头函数不能用new调用,不能bind()到某个对象(虽然binc()方法调用没问题,但是不会产生预期效果)。不管在什么情况下使用箭头函数,它本身是没有绑定this的,它用的是直接外层函数(即包含它的最近的一层函数或函数表达式)绑定的this。
希望我的入坑经验对你有所帮助,愿圣光与你同在