js中this的指向

this 
    只有在运行时才能确认值,定义时无法确认值。(根据其所在的运行环境,重要!!!)
    例:
        var a = {
            age:12,
            fn:function(){
                console.log(this.age)
            }
        }

        ① a.fn() //this === a
        ② a.fn.call({age:13}) //this === {age:13}
        ③ var f1 = a.fn 
            f1(); //this === window

    this的使用场景
        ① 在构造函数中使用
            this代表new出来的对象
            function Foo(){
                this.b = 10;
                console.log(this);//Foo {b:10}
            }
            var foo = new Foo();
            console.log(foo.b)//10
        ② 在普通函数中使用
            在全局环境中,this 永远指向 window。
            var a = 10;
            function foo(){
                console.log(this) //window
                console.log(this.a)//10

            }
            foo();
        ③ call bind apply
            当一个函数被 call、apply 或者 bind 调用时,this 的值就取传入的对象的值。
            var obj = {
                a:10
            }
            function foo(){
                console.log(this)//{a:10}
                console.log(this.a)
            }
            foo.call(obj)
            foo.apply(obj)
            foo.bind(obj)
        ④ 在对象方法中的this
            如果函数作为对象的方法时,方法中的this指向该对象
            var obj = {
                a:12,
                foo:function(){
                    console.log(this)//obj
                }
            }
            obj.foo();
            如果在对象方法中定义函数,情况有所不同
             var obj = {
                a:12,
                foo:function(){
                    console.log(this)//obj
                    function f(){
                        console.log(this)//window
                    }
                    f();
                }
            }
            obj.foo();

            var obj = {
                a:12,
                foo:function(){
                    console.log(this)//obj
                    var obj2 = {
                        b:45,
                        foo2:function(){
                            function f(){
                                  console.log(this)//window
                              }
                             f();

                        }
                    }
                    obj2.foo2();
                   
                }
            }
            obj.foo();
        ⑤ 箭头函数中的this
            词法作用域,由上下文决定:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定。
            var obj = {
                d:42,
                foo:() => {
                   var fn = () => {
                        return ()=> {
                        console.log(this)//继承自父级上下文 window
                    }
                   }
                   fn()();
                }
            }
            obj.foo()


            var obj = {
                d:42,
                foo:function() {
                   var fn = () => {
                        return ()=> {
                        console.log(this)//继承自父级上下文 obj
                    }
                   }
                   fn()();
                }
            }
            obj.foo()

小结例题
    例一:
        var user = {
        count : 1,
        getCount: function(){
        return this.count;
        }
        }
        var func = user.getCount
        console.log(func())//undefined

    例二:
        var baidu = {
            count: 2,
            getBaiduCount: function() {
                return this.count;
            }
        };
        console.log(baidu.getBaiduCount());//2
        var func = baidu.getBaiduCount;
        console.log(func());//undefined
    
    例三:
        var myObject={
            foo:"bar",
            func:function(){
                var self=this;
                console.log("outer func: this.foo="+this.foo);//bar
                console.log("outer func: self.foo="+self.foo);//bar
                (function(){
                    console.log("inner func: this.foo="+this.foo);undefined
                    console.log("inner func: self.foo="+self.foo);//bar
                }());
            }
        };
        myObject.func()

    例四:
            (function(){
        eval("console.log(this)");
    })();
    function Foo(){
        this.bar = function(){
            eval("console.log(this)"); // 指向这个function
        }
    }
    var foo = new Foo();
    foo.bar();
    例五:
        function someFun(x) { 
    this.x = x; 

someFun(5); 
console.log(x);//5
    例六:
        function Student(name){
    this.name = name;
}
var s1 = new Student('若川');
Student.prototype.doSth = function(){
    console.log(this.name);
}
s1.doSth(); // '若川'
    例七:
        var point = { 
    x : 0, 
    y : 0, 
    moveTo : function(x, y) { 
        this.x = this.x + x; 
        this.y = this.y + y;
        console.log(this.x); 
        console.log(this.y); 
    } 
}; 
point.moveTo(1, 1)//1,1
    例八:
        var a = 10;
var foo = {
    a: 20,
    fn: (function(){
        console.log(this); //window
        console.log(this.a); //10
    })()
}
    例九:
    var a = 10;
var foo = {
    a: 20,
    fn: function(){
        console.log(this.a);
    }
};
var bar ={
    a: 30
}
foo.fn.apply();//10
foo.fn.apply(foo);//20
foo.fn.apply(bar);//30
    例十:
        var length = 10;

function fn () {
    console.log(this.length);
}

var obj = {
    length: 5,
    method: function (fn) {
       
        fn.call(this);
    }
};
 
obj.method(fn);//5

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北街学长

你的鼓励使我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值