目录
一 丶 this的默认绑定(this默认指向了window)
一 丶 this的默认绑定(this默认指向了window)
1.全局环境下的this指向了window
console.log(this); //window
2.函数独立调用,函数内部的this也指向了window
function fn(){
console.log(this); //window
};
fn();
3.被嵌套的函数独立调用时,this默认指向window
var obj = {
a:2,
foo:function(){
//函数当做对象的方法调用 this指向了obj
console.log(this.a); //指向了obj中的a
function test(){
console.log(this.a); //window中的a
};
test();
}
};
obj.foo();
4.IIFE(自执行函数) 自执行函数中内部的this指向了window
var a = 10;
function foo(){
console.log(this.a); //指向了obj中的a
(function test(){
console.log(this.a); //window中的a
})();
};
var obj = {
a:2,
foo:foo
};
obj.foo();
5.闭包中this默认指向了window
var a = 0;
var obj = {
a:2,
foo:function(){
var c = this.a; //指向了obj中的a
return function test(){
console.log(this.a); //指向了window中的a
return c;
}
}
};
var fn = obj.foo();
console.log(fn())
二 丶 隐式绑定
当函数当做方法来调用,this指向了它的直接对象
function foo(){
console.log(this.a)
} ;
var obj = {
a:1,
foo:foo,
obj2:{
a:2,
foo:foo
}
} ;
//foo()函数的直接对象是obj,this指向了直接对象obj
obj.foo(); //指向了obj中的a
obj.obj2.foo(); //指向了obj2中的a
三 丶 隐式丢失
隐式丢失就是指被隐式绑定的函数丢失了绑定对象,从而默认绑定到了window上
1.函数别名
var a = 0;
function foo(){
console.log(this.a)
};
var obj={
a:1,
foo:foo
};
//把obj.foo赋值给bar,造成隐式丢失的情况,因为只是把obj.foo赋
//值给bar变量,而bar与obj对象毫无关系
var bar = obj.foo;
bar(); //指向了window中的a
2.参数传递
var a = 0;
function foo(){
console.log(this.a)
};
function bar(fn){
fn()
};
var obj = {
a:1,
foo:foo
};
//把obj.foo当做参数传递到bar函数中,有隐式的函数
//赋值 fn=obj.foo,只是把foo函数赋值给了fn,而fn与obj对象毫无关系
bar(obj.foo); //指向了window中的a
3.内置函数setTimeout()和setInterval()第一个参数的回调函数中的this默认指向window
var a = 0;
function foo(){
console.log(this.a)
};
var obj = {
a:1,
foo:foo
};
setTimeout(obj.foo,1000); //指向了window中的a
4.间接调用
var a = 0;
var p ={a:2};
function foo(){
console.log(this.a)
};
var obj = {
a:1,
foo:foo
};
//将obj.foo函数对象赋值给p.foo函数,然后立即执行,相当于
//仅仅是foo函数的立即调用,内部的this默认指向了window
(p.foo = obj.foo)(); //指向了window中的a
p.foo = obj.foo;
p.foo(); //指向了p中的a
5.其他情况 指向了window的特殊情况
var a = 0;
function foo(){
console.log(this.a)
};
var obj = {
a:1,
foo:foo
};
(obj.foo = obj.foo)(); //指向了window中的a
(false || obj.foo)(); //指向了window中的a
(1,obj.foo)(); //指向了window中的a
四 丶 显式绑定
1.call() apply() bind() 把对象绑定到this上,叫做显式绑定
var a = 0;
function foo(){
console.log(this.a)
};
var obj = {
a:1,
};
foo(); //指向了window中的a
foo.call(obj); //指向了obj中的a
foo.apply(obj); //指向了obj中的a
var fn = foo.bind(obj);
fn(); //指向了obj中的a
2.硬绑定(显式绑定的一种,使得this不能再被改变)
var a = 0;
function foo(){
console.log(this.a)
};
var obj = {
a:1,
};
var bar = function(){
foo.call(obj);
};
bar(); //指向了obj中的a
setTimeout(bar,2000); //指向了obj中的a
bar.call(window); //指向了obj中的a
3.forEach() map() filter() 等等方法中的this
var id = 'window';
function foo(el){
console.log(el,this.id)
};
var obj = {
id:'foo'
};
var arr = [1,2,3];
arr.forEach(foo); //指向了window中的id
arr.forEach(foo,obj); //指向了obj中的id
五 丶 箭头函数中的this
箭头函数中没有自己的this值,他的this都是来自作用域链,在作用域链中一层一层往上找
var a = 0;
const foo = () => {
var a = 1 ;
console.log(this.a); //指向了window中的a
};
foo();
六 丶 new绑定
1.使用new关键字创建实例化对象时this指向
function foo(){
//如果是new关键字来执行函数,相当于构造函数来实例化对
//象,内部的this指向了当前的实例化对象
console.log(this) //指向了foo
};
var fn = new foo();
console.log(fn); //指向了foo
2.使用new关键字创建实例化对象并用return来返回对象时this指向
function foo(){
console.log(this); //指向了foo
//使用return关键字来返回对象的时候 ,实例化出来的对象是当前的返回对象
return {
name:'xiaoming'
}
};
var fn = new foo();
console.log(fn); //指向了return中的对象
七 丶 严格模式下this的指向
1.独立调用的函数内部的this指向了undefined
function foo(){
'use strict';
console.log(this); //undefined
};
foo();
2.严格模式下 函数的apply()和call()内部的this始终是他们的第一个参数
var a=1;
function foo(){
'use strict';
console.log(this); //null
console.log(this.a); //读取不到
};
foo.call(null);