变幻莫测的上下文对象——this专场

1.  全局作用域下的this:指的是window,全局指的是不在任何{}里面的this。

<script>
    console.log(this)   //全局的this,输出为window      
</script>

2.  事件处理函数的this:该事件由谁触发,就指向谁,这里onclick事件是由div对象触发,所有this指向div(前提是在非箭头函数清空下)。

<script>
    div.onclick=function(){
        console.log(this)   //不是全局的this,这是事件处理函数中的this,该事件由谁触发,就指向谁,这里onclick事件是由div对象触发,所有this指向div(前提是在非箭头函数清空下)
    }
</script>

注意:<div onclick="console.log(this)"></div>这种写法,输出的this指的是<div onclick="console.log(this)"></div>这个标签。

<div onclick="(function(){console.log(this)})()"></div>这种写法,输出的this指的是window。

3.  函数执行的this(非箭头函数):包括在非node环境下运行的this,和node环境运行的this(node环境下的运行的this又包括在nodejs代码文件中的this和node运行环境终端命令行中的this)。

<script>
    //1.在非node且非严格模式下,函数的this指向window
    function fn(){
        console.log(this)   //在非node且非严格模式下,函数的this指向window
    }
    fn()     //输出为window


     //2.在非node且严格模式下,函数的this指向undefined
    function fn(){
        "use strict"
        console.log(this)   //在非node且严格模式下,函数的this指向undefined
    }
    fn()     //输出为undefined
    window.fn()   //输出为window


     //3.在非node且非严格模式下,函数的call调用,修改了this指向
    function fn(m,n){
        console.log(this.a,m,n)   
    }
    fn.call((a:1),2,3)     //fn.call(参数1,参数2,参数3),会调用fn函数,并call将fn函数里面的this修改指向为参数1,参数2,参数3是fn函数的实参。

     //4.在非node且非严格模式下,函数的bind调用,修改了this指向
    function fn(m,n){
        console.log(this.a)   
    }
    var fn1=fn.bind({a:2 })    //这步不执行fn函数,而是返回fn1是和fn一模一样的函数,并修改this的指向为bind的第一个参数,注意bind只能修改一次,即var fn2=fn1.bind({a:3})这种写法是无法修改this指向{a:3},因为fn1是已经修改过的this执行,但是可以var fn2=fn.bind({a:3})修改this指向{a:3}
    console.log(fn1)  



</script>
{
    //2. 配置了node环境,在node.js代码文件中的this
    console.log(this===modele.exports)  //返回true,即在node.js代码中运行node node.js文件,这里的this执行的是node.js文件默认导出的对象{}
}
{
    //3. 配置了node环境,在node.js文件的终端命令行中的this
    node    //在终端先输入node,在输入console.log(this)
    console.log(this)   //这里的this指向的是global。
}

4.  函数执行的this(箭头函数):包括函数内外this执行一致。注意,bind和call无法修改箭头函数的this指向。

  var fn=(){
        console.log(this)   
  }
  fn.call({a:1})     //call无法修改箭头函数的this指向,所有,这里仍然this指向window

5.  构造函数实例化的this:this指向实例化对象。

function Fn(){
    this.a=1;   //这个this指向实例化对象,如f
    //return 1;   //return 返回的非n对象(如 return 1),那么实例化结果,即console.log(f)输出为{a:1} 
    //return {}  //return 返回的非null对象(如 return {}),那么实例化结果就是返回出的对象,即console.log(f)输出为{} 
}
var f=new Fn()
console.log(f)   
var obj={
    m:1,
    n:2,
    get sun(){
        return this.n+this.m
    },
    set sun(val){    //obj对象里面的get和set里面的里面的this指向obj对象
        this.n=val/2;
        this.m=val*2;
    }
}

猜你喜欢

转载自blog.csdn.net/qq_42231156/article/details/87772994