一、this
1.1 ES5中,this是在生成执行上下文时产生的,this很专一,永远指向最后调用它的对象。
1.2 this绑定的几种情况:
-
this的默认绑定—独立函数被调用。
-
this的隐式绑定—对象用
.
调用方法。 -
this的显示绑定—对象使用apply()、call()、bind()三个方法。
-
this的new绑定—new方法调用构造函数。
-
匿名函数()里的this绑定到window。
二、this的绑定–this很专一,永远指向最后调用它的对象!
2.1 this的默认绑定:发生在独立函数被调用的情况下。
- 浏览器非严格模式下,一个独立的函数默认是绑定在window上的,那么,最后调用独立函数的对象就是全局对象window,this绑定到window上。而在浏览器严格模式下,this指向的是undefined。
独立函数被(window)调用this指向window
<script>
// this 的默认绑定
function fn() {
console.log(this); //Window
}
fn()
// 在浏览器中 独立函数调用,函数内部this表示window
</script>
<script>
function fn() {
console.log(this); //window
}
function gn() {
console.log(this); //window
fn(); // 独立函数调用
}
function kn() {
console.log(this); //window
gn(); // 独立函数调用
}
kn(); // 独立函数调
</script>
<script>
let obj = {
name: 'wc',
fn: function() {
console.log(this); //window
}
}
let gn = obj.fn;
gn(); // 独立函数调用
</script>
<script>
function fn() {
console.log(this); //Window
}
var obj = {
name: 'wc',
fn: fn
}
var gn = obj.fn;
gn();
</script>
<script>
function fn() {
function gn() {
console.log(this);
}
return gn; //返回一个地址 指向堆里的独立函数
}
let kn = fn(); //用地址赋值
kn(); // 独立函数调用
</script>
2.2 this的隐式绑定: 发生在对象用.
调用方法的情况下。
- this绑定到调用(此时也属于最后调用)方法的对象上。例如,对象a的方法b用
.
进行调用,形如:window.a.b();
,此时最后调用方法b
的就是这个对象a
,此时this绑定到a
。
以方法的形式调用时,this指向调用方法的对象
<script>
// this 的隐式绑定
function fn() {
console.log(this); //{name: 'wc', fn: ƒ}
}
let obj = {
name: 'wc',
fn: fn
}
obj.fn(); //不是独立函数的调用
// 是通过obj打点去调用
// fn中的this 表示的是 调用者obj
</script>
<script>
var obj = {
name: 'wc',
running: function() {
console.log(this.name + '在跑步...'); //wc在跑步...
},
coding: function() {
console.log(this.name + '在敲代码...'); //wc在敲代码...
}
}
obj.running(); //this的 隐式绑定
obj.coding(); //this的 隐式绑定
// obj调其用方法 this指向obj
</script>
<script>
let obj = {
name: 'wc',
fn: function() {
console.log(this); //{name: 'xq', gn: ƒ}
}
};
let obj2 = {
name: 'xq',
gn: obj.fn
};
obj2.gn(); //隐式绑定
</script