javascript中的this
文章目录
一、定义
函数的this关键字在javascript中表现略由不同,在严格模式和非严格模式之间也有一些差别。
在绝大多数情况下,函数的调用方式决定了this的值(运行时绑定)。
this关键字时函数运行时自动生成的一个内部对象,只能在函数内部使用,总之想调用它的对象。
function baz() {
// 当前的调用栈是:baz
// 因此,当前调用位置是全局作用域
console.log( "baz" );
bar(); // <-- bar的调用位置
}
function bar() {
// 当前的调用栈是:baz --> bar
// 因此,当前调用位置在baz中
console.log( "bar" );
foo(); // <-- foo的调用位置
}
function foo() {
// 当前的调用栈是:baz --> bar --> foo
// 因此,当前调用位置在bar中
console.log( "foo" );
}
baz(); // <-- baz的调用位置
this在函数执行过程中,this一旦被确定了,就不可以再更改了。
var a = 10;
var obj = {
a: 20
}
function fn() {
this = obj; // 修改this,运行后会报错
console.log(this.a);
}
fn();
二、绑定规则
根据不同的使用场合,this有不同的值:
- 默认绑定
- 隐式绑定
- new绑定
- 显示绑定
1、默认绑定
全局环境中定义person函数,内部使用this关键字。
var name = 'Jenny';
function person() {
return this.name;
}
console.log(person()); //Jenny
调用函数的对象在浏览器中是window,因此this指向window,所以输出的是Jenny。
注意:
严格模式下,不能将全局对象用于默认绑定,this会绑定到undefined,只有函数运行在非严格模式下,默认绑定才能绑定到全局对象。
2、隐式绑定
函数还可以作为某个对象的方法调用,这时,this就指向了这个上级对象。
function test() {
console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m(); // 1,this调用的位置是obj中的test函数,指向的是obj这个对象
当函数中包含多个对象,尽管这个函数是最内层的对象所调用的,this指向的也只是它的上一级的对象。
var o = {
a:10,
b:{
fn:function(){
console.log(this.a);
}
}
}
o.b.fn();//undefined
this的上一级对象是b,b内部并没有a变量的定义,所以输出undefined。
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a);
console.log(this);
}
}
}
var j = o.b.fn;
j(); //undefined window
this指向的是window,this指向的永远是最后调用它的对象,尽管fn是b的方法,但是fn在赋值给j的时候没有执行,所以最终指向window。
3、new绑定
通过构建函数new关键字生成一个实例对象,此时this指向的就是这个实例对象。
function test() {
this.x = 1;
}
var obj = new test();
obj.x // 1
new关键字改变了this的指向,由全局改变为obj。
new过程中return一个对象,则this指向的是这个返回的对象。
function fn()
{
this.user = 'xxx';
return {};
}
var a = new fn();
console.log(a.user); //undefined
当返回的是一个简单类型,则this指向的是实例对象。
function fn()
{
this.user = 'xxx';
return 1;
}
var a = new fn;
console.log(a.user); //xxx
当返回的是null,但是此时的this仍然指向实例对象。
function fn()
{
this.user = 'xxx';
return null;
}
var a = new fn;
console.log(a.user); //xxx
4、显示修改
apply(),call(),bind()是函数的一个方法,作用是改变函数的调用对象。它的第一个参数就表示改变后的调用这个函数的对象,因此,这时this指向的就是这第一个参数。
var x = 0;
function test() {
console.log(this.x);
}
var obj1 = {};
obj1.x = 1;
var obj = {};
obj.m = test;
obj.x = 2;
obj.m();// 2
obj.m.apply(obj1);// 1
obj.m.apply(obj);// 2
三、箭头函数
在ES6的语法中还提供了箭头函数语法,让我们在代码书写时就能确定this的指向(编译时绑定)。
const obj = {
sayThis: () => {
console.log(this);
}
};
obj.sayThis(); // window 因为JavaScript没有作用域,所以在定义sayThis的时候,里面的this就绑定到window上去了
const globalSay = obj.sayThis;
globalSay(); // window 浏览器中的global对象,这是ES6的规定。
箭头函数的this能够在编译的时候就确定了this的指向,但也需要注意一些潜在的坑。
const button = document.getElementById('mngb');
button.addEventListener('click', ()=> {
console.log(this === window) // true
this.innerHTML = 'clicked button'
})
这里绑定事件监听的时候,想要让this指向点击的button,但是this指向的实际是window。
Cat.prototype.sayName = () => {
console.log(this === window) //true
return this.name
}
const cat = new Cat('mm');
cat.sayName()
在原型上添加方法的时候,this的指向时window。
同时,箭头函数不能作为构建函数。
四、优先级
1、隐式绑定VS显示绑定
function foo() {
console.log( this.a );
}
var obj1 = {
a: 2,
foo: foo
};
var obj2 = {
a: 3,
foo: foo
};
obj1.foo(); // 2
obj2.foo(); // 3
obj1.foo.call( obj2 ); // 3
obj2.foo.call( obj1 ); // 2
显示绑定的优先级比隐式绑定高。
2、new绑定VS隐式绑定
function foo(something) {
this.a = something;
}
var obj1 = {
foo: foo
};
var obj2 = {};
obj1.foo(2);
console.log(obj1.a);// 2
obj1.foo.call(obj2, 3);
console.log(obj2.a); // 3
var bar = new obj1.foo(4);
console.log(obj1.a);// 2
console.log(bar.a);// 4
new绑定的优先级比隐式绑定高。
3、new绑定VS显示绑定
new和apply、call无法一起使用,但硬绑定也是显示绑定的一种,可以替换测试。
function foo(something) {
this.a = something;
}
var obj1 = {};
var bar = foo.bind( obj1 );
bar(2);
console.log(obj1.a);// 2
var baz = new bar(3);
console.log(obj1.a);//2
console.log(baz.a);//3
bar被绑定到obj1上,但是new bar(3)并没有像我们预计的那样把obj1.a修改为3。但是,new修改了绑定调用bar()总的this。
所以new绑定的优先级比显示绑定高。
new绑定 > 显示绑定 > 隐式绑定 > 默认绑定