zoukankan      html  css  js  c++  java
  • 浅谈JavaScript中this的指向

    浅谈JavaScript中this的指向

    1.默认指向,this默认指向的是window对象

    console.log(this);//打印的是window
    

    2.函数调用时

    2.1独立调用,this指向window对象
    function test(){
        console.log(this);//打印的是window
    }
    window.test();//简写test()
    
    2.2函数作为某个对象的方法时,this指向的是当前对象
    let obj = {
         name:"test",
         show:function(){
         console.log(this);//这个打印出来的是window
    	}
    }
    let a = obj.show;//a就是function(){console.log(this);}
    a();//window.a();
    

    3.指向当前对象

    let obj = {
       name:'test',
       age:19,
       show:function(){
        console.log(this);
        }
    }
    obj.show();//打印出来的是Object
    

    4.this指向绑定的元素,当函数作为一个事件处理函数的时候,这时this是指向绑定的元素

    <body>
    	<button>点击</button>
    </body>
    <script>
    	document.querySelector("button").onclick=function(){
    	console.log(this);
    	}
    </script>
    

    5.改变this的指向

    5.1 call()
    let obj={
        name:'hello',
        age:19,
        show:function(x,y){
            console.log(this);//Object
            console.log(this.name);//张三
            console.log(this.age+x+y);//50
        }
    }
    let obj2={
        name:'张三',
        age:30
    }
    obj.show.call(obj2,10,10);
    
    5.2 apply()
    let obj={
        name:'hello',
        age:19,
        show:function(x,y){
            console.log(this);//Object
            console.log(this.name);//张三
            console.log(this.age+x+y);//60
        }
    }
    let obj2={
        name:'张三',
        age:30
    }
    obj.show.apply(obj2,[10,20]);
    
    es5中bind()
    let obj={
        name:'hello',
        age:19,
        show:function(x,y){
            console.log(this);//Object
            console.log(this.name);//张三
            console.log(this.age+x+y);//60
        }
    }
    let obj2={
        name:'张三',
        age:30
    }
    let test = obj.show.bind(obj2);
    test(10,20);
    

    6.箭头函数的this的指向,它的this指向始终是指向的外层作用域

    由于箭头函数不绑定this, 它会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值
    let obj = {
        name:"test",
        show:()=>{
            console.log(this);//打印出Window
        }
    }
    obj.show();
    
  • 相关阅读:
    去除安卓apk中的广告
    公司固定资产管理细则
    固定资产基础知识
    C#的WebBrowser操作frame
    C#程序集版本控制文件属性祥解
    c#使用RSA进行注册码验证
    Web前端开发十日谈
    Web.xml配置详解
    IBM WebSphere MQ的C#工具类以及源码(net)
    Castle IOC FOR MVC 使用方法
  • 原文地址:https://www.cnblogs.com/Wardenclyffe/p/12565760.html
Copyright © 2011-2022 走看看