this的4种绑定规则
2018-09-05 11:15
801 查看
this的四种绑定规则:默认绑定、隐式绑定、显式绑定和new绑定,分别对应函数的四种调用方式:独立调用、方法调用、间接调用和构造函数调用。
1、默认绑定
- 全局环境中,this默认绑定到window
[code]console.log(this === window);//true
- 函数独立调用时,this默认绑定到window
[code]function foo(){ console.log(this === window); } foo(); //true
- 被嵌套的函数独立调用时,this默认绑定到window
[code]//虽然test()函数被嵌套在obj.foo()函数中,但test()函数是独立调用,而不是方法调用。所以this默认绑定到window var a = 0; var obj = { a : 2, foo:function(){ function test(){ console.log(this.a); } test(); } } obj.foo();//0
如果调用obj.foo()本身,foo()函数中的this指向调用函数的对象,即obj对象
[code]var a = 0; var obj = { a: 2, foo: function () { console.log(this.a); } } obj.foo();//2
- IIFE立即执行函数实际上是函数声明后直接调用执行
[code]var a = 0; function foo(){ (function test(){ console.log(this.a); //this指向window })() }; var obj = { a : 2, foo:foo } obj.foo();//0
- 闭包中内部函数的this默认指向window对象
[code]var a = 0; function foo(){ function test(){ console.log(this.a); } return test; }; var obj = { a : 2, foo:foo } obj.foo()();//0
由于闭包的this默认绑定到window对象,但又常常需要访问嵌套函数的this,所以常常在嵌套函数中使用var that = this,然后在闭包中使用that替代this,使用作用域查找的方法来找到嵌套函数的this值
2、隐式绑定
当函数作为对象里的方法被调用时,
this是调用该函数的对象。
[code]function foo(){ console.log(this.a); }; var obj1 = { a:1, foo:foo, obj2:{ a:2, foo:foo } } //foo()函数的直接对象是obj1,this隐式绑定到obj1 obj1.foo();//1 //foo()函数的直接对象是obj2,this隐式绑定到obj2 obj1.obj2.foo();//2
隐式丢失
隐式丢失是指被隐式绑定的函数丢失绑定对象,从而默认绑定到window。这种情况容易出错却又常见
[code]var a = 0; function foo(){ console.log(this.a); }; var obj = { a : 2, foo:foo } //把obj.foo赋予别名bar,造成了隐式丢失,因为只是把foo()函数赋给了bar,而bar与obj对象则毫无关系 var bar = obj.foo; bar();//0
3、显示绑定
通过call()、apply()、bind()方法把对象绑定到this上,叫做显式绑定。对于被调用的函数来说,叫做间接调用
[code]var a = 0; function foo(){ console.log(this.a); } var obj1 = { a:1 }; var obj2 = { a:2 }; foo.call(obj1);//1 foo.call(obj2);//2
【API】
javascript中新增了许多内置函数,具有显式绑定的功能,如数组的5个迭代方法:map()、forEach()、filter()、some()、every()
[code]var id = 'window'; function foo(el){ console.log(el,this.id); } var obj = { id: 'fn' }; [1,2,3].forEach(foo);//1 "window" 2 "window" 3 "window" [1,2,3].forEach(foo,obj);//1 "fn" 2 "fn" 3 "fn"
4、new绑定
如果函数或者方法调用之前带有关键字new,它就构成构造函数调用。对于this绑定来说,称为new绑定。理解new一个对象发生的过程。this指向创建的新对象。
[code]function fn(){ this.a = 2; } var test = new fn(); console.log(test.a);//2
阅读更多
相关文章推荐
- 深入理解this机制系列第一篇——this的4种绑定规则
- 深入理解this机制系列第一篇——this的4种绑定规则
- 深入理解this机制系列第一篇——this的4种绑定规则
- this的绑定规则
- JavaScript中this的四个绑定规则总结
- 你不知道的javascript之this的全面解析之绑定规则(一)
- JavaScript--this的绑定规则
- this的四种绑定规则总结
- 从 ECMAScript 规范来看 JS 的 this 绑定规则
- 利用伪静态化Rewrite规则httpd.ini文件实现域名绑定子目录功能
- jQuery的4种事件绑定方式的区别
- javascript下动态this与动态绑定实例代码
- 【javascript】函数中的this的四种绑定形式 — 大家准备好瓜子,我要讲故事啦~~
- this指针的隐式动态绑定
- javascript中四种函数调用模式及对this的不同绑定
- jquery元素动态绑定过程中的js原始关键字this仍然可用
- springmvc 路径映射规则、数据绑定
- 如何解决attachEvent函数时,this指向被绑定的元素的问题?
- AS3作用域规则–this指向哪里
- javascript使用bind()函数绑定this