正常函数
this是js语言的一个关键字。
它是运行的时候,在函数体内部自动生成的一个对象,只能在函数体内部使用
function test() {
this.x = 1
}
上图中这个this到底是什么东西,主要分为四种情况那么,this的值是什么呢?
函数的不同使用场合,this有不同的值。总的来说,this就是函数运行时所在的环境对象。下面分四种情况,详细讨论this的用法。
情节一 纯粹的函数调用
这是函数的最通常用法,属于全局性调用,因此this就代表全局对象。请看下面这段代码,它的运行结果是1
var x = 1;
function speak() {
console.log(this.x);
}
speak() //1
情节二 作为对象方法的调用
函数还可以作为某个对象的方法调用,这时this就指这个上级对象。
function test() {
console.log(this.x);
}
var obj = {}
obj.x = 2;
obj.speak = test;
obj.speak(); //
情节三 作为构造函数调用
所谓构造函数,就是通过这个函数,可以生成一个新对象。这时,this就指这个新对象。
var x = 2;
function test() {
this.x = 1;
}
var obj = new test();
console.log(obj.x); //1
console.log(x); // 2
情节四 apply 调用
apply()是函数的一个方法,作用是改变函数的调用对象。它的第一个参数就表示改变后的调用这个函数的对象。因此,这时this指的就是这第一个参数。
var x = 0;
function test() {
console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply(); //0
obj.m.call(); //0
obj.m.apply(obj); //1
obj.m.call(obj)//1
apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。
情节五 函数嵌套
函数最外层的指向当前对象,内部包含的this默认指向window,
如果想要使得this指向当前对象可以使用几种方法
1 var that =this得到age;
2 call ,apply,bind() 得到
3 箭头函数
var obj = {
age: 11,
getAge: function () {
console.log(this); //当前对象
var fn = function () {
console.log(this);//指向window
//替代方法 1 let that=this return that.age;
return this.age;
}
//替代方法2 return fn.call(this)
//替代方法3 return fn.bind(this) ()
//替代方法4 return fin.apply(this)
//或者直接用箭头函数
return fn();
}
};
情节6 箭头函数
箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定;解决了内层函数的this指向window的问题。
上方的例子可以改为这样的
var obj = {
age: 11,
getAge: function () {
var fn = () => this.age;
return fn()
}
};
(http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html)