最新文章:

您的位置: 富录-前端开发|web技术博客 > JavaScript > JavaScript中this的指向

JavaScript中this的指向

发布时间:2017年05月22日 评论数:2阅读数: 2294

    在函数执行时,this 总是指向调用该函数的对象。要判断 this 的指向,其实就是判断 this 所在的函数属于谁。

    1、有所属对象的时候指向该对象
    2、没有所属对象的时候指向全局即:window
    3、用new实例化出新对象后就指向新对象
    4、通过apply,call或bind可以改变this指向

    函数有所属对象时:指向所属对象

    var myObject = {
            value: 100
        };
        myObject.getValue = function () { 
            console.log(this.value); 
            // 输出 100  // 输出 { value: 100, getValue: [Function]}, // 其实就是 myObject 对象本身 console.log(this);  
            return this.value;
        }; 
        console.log(myObject.getValue()); // => 100

    getValue() 属于对象 myObject,并由 myOjbect 进行 . 调用,因此 this 指向对象 myObject。

    函数没有所属对象:指向全局对象window

    var myObject = {
            value: 100
        };
        myObject.getValue = function () { 
            var foo = function () {  
                    console.log(this.value) // => undefined  console.log(this);// 输出全局对象 global 
                };  
                foo();  
                return this.value;
        }; 
        console.log(myObject.getValue()); // => 100

    在上述例子中,foo函数虽然定义在 getValue 的函数体内,但实际上它既不属于 getValue 也不属于 myObject。foo 并没有被绑定在任何对象上,所以当调用时,它的 this 指针指向了window。

    new实例化后:指向新对象

    var SomeClass = function(){ 
            this.value = 100;
        };
    var myCreate = new SomeClass(); 
    console.log(myCreate.value); // 输出100

    通过apply,call或bind:指向绑定的对象

    var myObject = {
            value: 100
        }; 
    var foo = function(){ 
            console.log(this);
        }; 
        foo(); // 全局变量 global
        foo.apply(myObject); // { value: 100 }
        foo.apply();//参数为空的时候默认指向全局
        foo.call(myObject); // { value: 100 } 
    var newFoo = foo.bind(myObject);
        newFoo(); // { value: 100 }



二维码加载中...
本文作者:DGF      文章标题: JavaScript中this的指向
本文地址: https://www.arbays.com/post-13.html     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
chenpeng20120501
chenpeng201205012017-11-15 21:51回复
#2
写的很不错,学习了
。。。
。。。2017-05-29 11:34回复
#1
一直是一头雾水……