JavaScript之this对象详解

1.看前热身

看一段代码

<script type="text/javascript">
    var name = "javascript";
    var obj = {
        name:"js",
        foo:function () {
            console.log(this.name);
        }
    };
    //挪用foo函数
    obj.foo();   //js
</script>

上面的这段代码中 obj是JavaScript中的对象范例,对象就是属性和要领的鸠合。
假如实行obj.foo()函数的话,在控制台输出js。
实在this的定义就是,他是js对象中的一个特别指针,他的指向依据环境的差别而发作转变。

2.this的指向

this的指向:谁挪用或许哪一个对象挪用this地点的函数,this就指向谁。
组织函数的this和一般函数的this指向
组织函数的this

//组织函数和一般函数的this指向
    var  name = '淘宝';
    //组织函数
    function Foo() {
        this.name = '腾讯';
        this.aa = function () {
            console.log(this.name);
        } ;
    }
//    实例化对象
    var obj = new Foo();
    obj.aa();//腾讯

一般函数的this

var name = '淘宝';
function foo() {
    var name =  '腾讯';
    console.log(this.name);
}
foo(); //淘宝

在一般函数中,this指的是window对象,所以在这里输出的依然是‘淘宝’;
更深的一个函数的this

 var name = '淘宝';
    function Foo() {
        this.name = '腾讯';
        this.foo = function () {
            var name  = '百度';
            return function () {
                console.log(this.name);
            }
        }
    }
    var obj  = new Foo();
    obj.foo()();//淘宝

这个函数this的指向依然是window

3.定时器中的this指向

//    定时器中的this
    var name = '淘宝';
    function foo() {
        var name = '腾讯';
        console.log(this.name);
    }
//    定时器
    setTimeout(foo,1000) //淘宝

由此小案例能够看出 定时器中的this指的是window对象。
再来看一个小的示例

var name = '淘宝';
var obj = {
    name :'腾讯',
    fn:function () {
        console.log(this.name);
    },
    foo:function () {
        setTimeout(this.fn,1000);
    }
};
obj.foo();//淘宝

为何输出的依然是淘宝呢?
obj.foo()挪用的是obj对象中的foo()要领,foo()要领内里有一个定时器,而定时器的一个参数是this.fn,这里的this指的就是obj的对象,然后fn()要领内里有挪用了this.name,然则定时器中的this指的是window对象,所以终究this.name挪用的是window对象中name。

在上面的示例中,把输出的‘淘宝’改成‘腾讯’

 var name = '淘宝';
   var obj = {
       name :'腾讯',
       fn:function () {
           console.log(this.name);
       },
       foo:function () {
           // setTimeout(this.fn.call(obj),1000);
           setTimeout(this.fn.bind(obj),1000);
       }
   };
   obj.foo();//腾讯

在this挪用的时刻增加bind或许call强迫转变this的指向,在这里,指向了obj,所以输出的是obj.name,为‘腾讯’。

4.箭头函数的this

示例

var author = 'lzz';
   var book = {
       author:'ql',
       init:function () {
           setTimeout(ev => {
               console.log(this.author);
           },1000);
       }
   };
   book.init();

箭头函数的特性就是定义在哪,this的指向在那。就是箭头函数定义在一个对象内里,那末箭头函数内里的this就指向该对象。

    原文作者:17岁AD想打职业
    原文地址: https://segmentfault.com/a/1190000012917268
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞