this指向_this到底指向的谁？

最新推荐文章于 2021-12-08 09:21:46 发布

weixin_39618597

最新推荐文章于 2021-12-08 09:21:46 发布

阅读量101

点赞数

文章标签： this指向箭头函数的this指向谁

this关键字是一个非常重要的语法点。毫不夸张地说，不理解它的含义，大部分开发任务都无法完成。

记住一点：this不管在什么地方使用：它永远指向一个对象。

一、一般使用this有以下几个场景：

1.普通函数中；

<script>
function f1 () {
       console.log(this);   //指向的是window
}
f1();
</script>

2.事件函数中；

<body>
     <input type = "button" id = "btn" value = "按钮" >
</body>
<script>
    function f2(){
        console.log(this);    //在事件函数中 this都是指向触发事件的标签
}
    document.getElementById('btn').onclick = f2;
</script>

3.构造函数中；

<script>
      function person () {
         this.name = '张三';
         this.age = 30;
         console.log(this);    //this指向是实例化后的那个对象
   }
      var obj = new person ();
</script>

4.对象方法中；

<script>
      var obj = {
         "name" : '李四',
         "age" :  30 ,
         "say" : function (){
              console.log(this);    //方法被那个对象调用的，this就是谁
         }
      };
      obj.say();     //此时的this就是obj

      var obj2 = {
         "name" : '王五',
         "age" :  40 , 
         "say" : obj.say         
      };
      obj2.say();   //此时的this就是obj2

     //将以上代码换个写法
     function fn () {
         console.log(this);
     }
     var obj = {
         "name" : '李四',
         "age" :  30 ,
         "say" : fn
     };
     var obj2 = {
         "name" : '王五',
         "age" :  40 , 
         "say" : fn
     };
     obj.say();      //此时的this就是obj
     obj2.say();     //此时的this就是obj2
</script>

5.html标签中；

<body>
    <img src = "1.jpg"  onclick = "f3 (this);">      //this指向的是标签本身
    <img src = "1.jpg"  onclick = "this.src = '2.jpg';">  //更换图片
</body>
<script>
   function f3 (obj) {
         console.log(obj);
   }
</script>

二、this的注意事项

1.链式调用（连贯调用）

<script>
    var obj = {
    	"age" : 40,
    	"son" :{"age":20,"say":function () {console.log(this);}}  //看方法调用的前面的那个值
    };
    obj.son.say();
</script>

2.函数嵌套

<script>
    function f4() {
    	console.log(this);            //如果函数是普通调用，那么this都是window对象
    	function f5() {
    		console.log(this);    //如果函数是普通调用，那么this都是window对象
    	}
    	f5();
    }
    f4();
</script>

注意：在对象方法中，还有嵌套的函数或者其他对象的方法，在内层想要使用外层的this，需要重新声明一个变量，保存外层的this

<script>
    var obj1 = {
    	"age" : 30;
    	"say" : function(){
    		console.log(this);
    		//如果要在obj2中，使用obj1的this
    		var that = this;
    		var obj2 = {
    			"walk" : function(){
    				console.log(that.age);
    			}
    		}
    	}
    }
</script>

三、改变函数中this指向

1.函数.apply(对象，[参数1，参数2])方法

作用：改变函数内部的this指向，然后调用函数

用法：

<script>
    function fn(m,n){
    	console.log(this,m,n);
    }
    fn(3,6);
    var obj = {"age" :30};
    fn.apply(obj,[8,9]);
</script>

效果图：

2. 函数.call(对象，参数1，参数2)方法

作用：改变函数内部的this指向，然后调用函数

用法：

<script>
    function fn(m,n){
    	console.log(this,m,n);
    }
    fn(3,6);
    var obj = {"age" :30};
    fn.call(obj,8,9);
</script>

效果图：同上边一样，就是写法不一样

3. 函数.bind()方法

作用：改变函数内部的this指向，然后返回新函数

<script>
    function fn(m,n){
    	console.log(this,m,n);
    }
    fn(3,6);
    var obj = {"age" :30};
    fn.bind(obj,8,9);  //默认不调用
    fn.bind(obj,8,9)();  //这样效果图同上边一样了
    fn.bind(obj)(8,9);  //两种写法都可以，效果一样
</script>

小案例：已知一个数组，求最大值

<script>
    var arr =[3,9,5,12];
    //Math.max(3,9,5,12)  每一个值都得从数组中取出来
    //for循环遍历 判断   这样很麻烦，不推荐使用
    //使用apply()方法
    console.log( Math.max.apply(null,arr) );     //12
</script>

weixin_39618597

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
this指向_this到底指向的谁？

this关键字是一个非常重要的语法点。毫不夸张地说，不理解它的含义，大部分开发任务都无法完成。记住一点：this不管在什么地方使用：它永远指向一个对象。一、一般使用this有以下几个场景：1.普通函数中；<script>function f1 () { console.log(this); //指向的是window}f1();</script>2...
复制链接

扫一扫