JS函数中的this的四种绑定方式
1. this的默认绑定window
凡是函数作为独立函数调用,没有指定调用对象, 无论位置在哪里,this默认绑定window对象
示例如下:
function test(){
console.log(this == window);
}
test(); // 打印true
function outFun(){
function inFun(){
console.log(this == window);
}
inFun();
}
outFun(); // 打印true
2. this的隐式绑定
示例1:
var person = {
age: 12,
onTest: function(){
console.log(this.age);
}
}
person.onTest(); // 输出12
当函数被一个对象包含的时候,函数的this被隐式的绑定到这个对象, 这时可以通过this访问绑定对象的其他属性
示例2:
function onTest(){
console.log(this.age);
}
var person1 = {
age: 12,
onTest: onTest
}
person1.onTest(); // 输出12
onTest(); // 输出 undefined
person1.onTest() 也可以取到age, 可以看出函数this的绑定并不会因为它被定义在j对象的内部和外部而有任何区别
示例3:
var person2 = {
age: 12,
onTest: function(){
console.log(this.age);
}
}
function callTest(fn){
fn()
}
callTest(person2.onTest); // 输出undefined
- 函数this的隐式绑定是动态的
- 由于函数的this与对象是动态绑定的, 在对象调佣函数之前函数的this和对象没有强制绑定,函数传递存在this绑定丢失问题
3.this的显示绑定(使用call 和 bind)
var person3 = {
age: 12,
onTest: function(){
console.log(this.age);
}
}
function callTest(fn){
fn.call(person3); // 硬绑定
}
callTest(person3.onTest); // 输出12
使用call() 方法,传递丢失的this绑定成功绑定到person3
var person3 = {
age: 12,
onTest: function(){
console.log(this.age);
}
}
var fn = person3.onTest;
fn(); // 输出undefined
var onTest2 = fn.bind(person3);
onTest2(); // 输出12
使用bind() 方法,得到一个this和对象绑定的方法
call和bind的区别是:在绑定this到对象参数的同时
1.call将立即执行该函数
2.bind不执行函数,只返回一个可供执行的函数
4.new绑定
function fun(a){
this.name = a;
}
var obj1 = new fun('aa');
var obj2 = new fun('bb');
console.log(obj1.name);
console.log(obj2.name);
执行new操作的时候,将创建一个新的对象,并且将构造函数的this指向所创建的新对象
5.注意
箭头函数:不使用这四个this规则,根据词法作用域来决定this。