码迷,mamicode.com
首页 > Web开发 > 详细

《你不知道的js》——this全面解析

时间:2018-08-30 10:59:23      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:修改   重复   接收   传递   error   style   var   timeout   define   

默认绑定

//全局对象用于默认绑定
function foo(){
    console.log(this.a)
}
var a=2;
foo();  //2
//严格模式下,不能将全局对象用于默认绑定
function foo(){
    ‘use strict‘;
    console.log(this.a)
}
var a=2;
foo();  //TypeError: this is undefined
//在严格模式下调用foo()则不影响默认绑定
function foo(){
    console.log(this.a)
}
var a=2;
(function(){
    ‘use strict‘;
    foo();
})();  //2

 

隐式绑定

//当函数拥有上下文对象时,隐式绑定规则会把函数调用中的this绑定到这个上下文对象
function foo(){
    console.log(this.a)
}
var obj={
    a:2,
    foo:foo
}
obj.foo();    //2
//对象属性链中只有上一层或者最后一层在调用位置中起作用
function foo(){
    console.log(this.a)
}
var obj2={
    a:42,
    foo:foo
}
var obj1={
    a:2,
    obj2:obj2
}
obj1.obj2.foo();    //42
//this 被隐式绑定的函数会丢失绑定对象,也就是说会应用默认绑定,从而把this绑定到全局对象或者undefined上
function foo(){
    console.log(this.a)
}
var obj={
    a:2,
    foo:foo
} 
var bar=obj.foo;
var a="hello";
bar();  //hello
//参数传递其实就是隐式传递,因此我们传入函数是也会被隐式赋值
function foo(){
    console.log(this.a)
}
function doFoo(fn){
    fn();
}
var obj={
    a:2,
    foo:foo
}

var bar=obj.foo;
var a="hello";
doFoo(obj.foo)  //hello
//回调函数丢失this绑定
function foo(){
    console.log(this.a)
}
var obj={
    a:2,
    foo:foo
} 
var a="hello";
setTimeout(obj.foo,100)   //hello

显式绑定

//通过foo.call(..),在调用foo时强制把它的this绑定到obj上
function foo(){
    console.log(this.a)
}
var obj={
    a:2
}
foo.call(obj) //2
//硬绑定
function foo(){
    console.log(this.a)
}
var obj={
    a:2
} 
var bar=function(){
    foo.call(obj)
};
bar(); //2
setTimeout(bar,100);  //2
//硬绑定的bar    不可能再修改它的this
bar.call(window); //2
//硬绑定典型应用场景:创建一个包裹函数,负责接收参数并返回值
function foo(something){
    console.log(this.a,something);
    return this.a + something;
}
var obj={
    a:2
}
var bar=function(){
    return foo.apply(obj,arguments)
}
var b=bar(3);  //2 3
console.log(b)    //5
//硬绑定典型应用场景:创建一个可以重复使用的辅助函数
function foo(something){
    console.log(this.a,something);
    return this.a + something;
}
    //简单的辅助绑定函数
function bind(fn,obj){
    return function(){
        return fn.apply(obj,arguments)
    }
}
var obj={
    a:2
}
var bar=bind(foo,obj);
var b=bar(3); //2 3
console.log(b)  //5

 

《你不知道的js》——this全面解析

标签:修改   重复   接收   传递   error   style   var   timeout   define   

原文地址:https://www.cnblogs.com/fe-cherrydlh/p/9554515.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!