JavaScript基础知识1——理解this指向

最新推荐文章于 2024-08-14 21:21:15 发布

原创最新推荐文章于 2024-08-14 21:21:15 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#this

js基础分享同时被 3 个专栏收录

6 篇文章

订阅专栏

js复习

4 篇文章

订阅专栏

新手上路

4 篇文章

订阅专栏

本文详细解析了JavaScript中this关键字的四种指向方式：作为对象方法调用时指向该对象；作为普通函数调用时指向全局对象（非严格模式下）；作为构造函数调用时指向新创建的对象或返回的对象；使用call/apply调用时指向指定的对象。

this指向

JavaScript的this总是指向一个对象，具体指向的对象根据运行时函数执行的环境动态绑定的，并不是函数声明时的环境，简单的理解就算函数或方法被那个对象调用就指向改对象。

this的指向大致分为以下4种；

1. 作为对象的方法调用，指向该对象；

            var color={
	          Item:"red",
	          getItem:function(){
                     console.log(this===color);//true
                     console.log(this.Item);//"red"
	          }
            }  
            color.getItem();

2. 作为普通函数调用，指向window;

           window.name='global';
           var getName=function(){
	      return this.name;
           }
           console.log(getName());//gloabl
           /**严格模式下,this是undifined**\

3.构造器调用，无对象返回时指向该对象，有对象返回指向被返回对象；

           var myClazz = Function(name) {
	           this.name = name;
           };
           var obj = new myClazz('jane');
           console.log(obj.name);//jane

           var myClazz = Function(name) {
	         this.name = name;
	  	     return {name:'rose'};
           };
           var obj = new myClazz('jane');
           console.log(obj.name);//rose

4.与普通函数调用相比，call、apply调用能动态改变this指向。

           var obj = {
               name: 'jane'
           };
           var obj_ = {
               name: 'rose'
           };
           window.name = 'window';
           var getName = function(){
               alert(this.name);
           };
           getName(); // 输出: window            /**普通函数调用指向window**\
           getName.call(obj); // 输出: jane      /**this指向obj**\
           getName.call(obj_); // 输出: rose     /**this指向obj_;**\