最近看视频重学下this指向问题,顺便做下笔记加深记忆
this的默认绑定规则
this默认指向window
<script type="text/javascript">
console.log(this === window) //true
</script>
在方法中,this也指向window,函数独立调用,this也指向window
function test() {
console.log(this === window)
}
test() //true
隐式绑定规则
谁调用this就指向谁
<script type="text/javascript">
var obj = {
name: '鱼鱼',
foo: function () {
console.log(this === obj)
}
}
obj.foo() //true
</script>
在函数内部再定义一个函数
<script type="text/javascript">
var obj = {
name: '鱼鱼',
foo: function () {
console.log(this === obj)
function test () {
console.log(this)
}
test(); //指向window,因为test是独立调用
}
}
obj.foo() //true
</script>
函数立即执行,函数里的this同样相应的全局对象,(浏览器中指向window)
<script type="text/javascript">
var obj = {
name: '鱼鱼',
foo: function () {
console.log(this === obj)
function test () {
console.log(this)
}
test(); //window,因为test是独立调用
(function() {
console.log(this) //指向window
})();
}
}
obj.foo() //true
</script>
参数赋值的情况
obj.foo作为参数相当于foo独立调用,独立调用指向window
<script type="text/javascript">
function foo() {
console.log(this)
}
function bar(fn) {
fn();
}
var obj = {
a: 2,
foo: foo
}
bar(obj.foo) //指向window
</script>
父函数有能力决定子函数的this指向
显示绑定,call, bind,apply
为了改变指向对象而存在,可以参考下面文章
call bind apply用法
new绑定
<script type="text/javascript">
function Person() {
this.a = '芜湖'
}
var person = new Person();
console.log(person) //指向实例化对象Person
</script>
箭头函数的this
箭头函数内部没有this指向,是由最外层定义的
<script type="text/javascript">
function foo() {
var test = () => {
console.log(this)
}
test();
}
var obj = {
name: '鱼鱼',
foo: foo
}
obj.foo(); //打印的是obj而不是window
</script>
箭头函数的独立调用
<script type="text/javascript">
function foo() {
var test = () => {
console.log(this)
}
return test
}
var obj = {
name: '鱼鱼',
foo: foo
}
obj.foo()(); //依旧是obj,独立调用对箭头函数无效
</script>
call以及apply等显示规则对箭头函数无效