springboot实战电商项目mall4j (https://gitee.com/gz-yami/mall4j)
JavaScript中的this绑定
在日常的开发中,我们会经常使用JavaScript中的一个关键字:this,在常见的编程语言中,几乎都有this这个关键字,但是JavaScript中的this和常见的变成语言中的this不太一样,
在常见的变成语言(java,c++等)中,this通常只会出现在类的方法中,而this指向它当前调用的对象,但是在JavaScript中,this是更加灵活的,无论是它出现的位置还是它代表的含义。
this全局作用下的指向
这个问题非常容易回答,在浏览器中,this的指向为全局对象window
console.log(this) // window 对象
var name = "hhf"
console.log(this.name) // hhf
console.log(window.name) // hhf
但是,开发中很少直接在全局作用于下去使用this,通常都是在函数中使用的
this到底指向什么呢?
下面我们通过一段代码,代码中,我们定义一个函数,对他进行三种不同的方式进行调用,它产生了不同的结果
function foo() {
console.log(this)
}
foo() // window对象
const obj = {
name: "hhf",
foo: foo
}
obj.foo() // obj1
const obj2 = {
}
foo.call(obj2) // obj2
从上面代码运行的结果我们得出:
1.函数在调用时,JavaScript会默认给this绑定一个值;
2.this的绑定和定义的位置(编写的位置)没有关系;
3.this的绑定和调用方式以及调用的位置有关系;
4.this是在运行时被绑定的
在JavaScript中,this有四种绑定规则,分别是:
1.默认绑定
2.隐式绑定
3.显式绑定
4.new绑定
下面我们分别对这四种绑定规则进行学习
默认绑定
默认绑定通常是在独立函数进行调用时进行绑定,独立函数调用我们可以理解成没有被绑定到某个对象进行调用,默认绑定在浏览器中指向的是window,当为严格模式(use strict)的时候指向的是undefined
// 案例一
function foo() {
console.log(this)
}
foo() // window对象
// 案例二
function foo(fn) {
fn()
}
const obj = {
name: "hhf",
bar: function() {
console.log(this)
}
}
foo(obj.bar) // window
显示绑定
显示绑定通常是某个对象对它