二.js中对this的理解

最新推荐文章于 2023-06-23 22:25:05 发布

Luna_hua

最新推荐文章于 2023-06-23 22:25:05 发布

阅读量184

点赞数

分类专栏：前端面试文章标签： javascript 面向对象

前端面试专栏收录该内容

6 篇文章 0 订阅

订阅专栏

this对象在执行时是基于函数的执行环境绑定的。

this是面向对象语言中的一个重要概念，在java，c#等大型语言中，this固定指向运行时的当前对象。但在js中，由于js的动态性（解释执行，当然也有简单的预编译过程），this的指向在运行时才确定。故它非常灵活，结合apply（call）方法，可以使其变得异常强大。

一.在一般函数方法中this指代全局对象（此时this==window）

this通常指向的是我们正在执行的函数本身，或者说是指向该函数所属的对象（运行时）#而不是函数被创建时所在的对象#。当我们在页面定义了函数function()的时候，它的owner是页面，或者是JavaScript中的window对象（或 global对象）。对于一个onclick属性，它为它所属的HTML元素所拥有，this应该指向该HTML元素。

例子：

<script>
   var fullname = "hualp";
   var person = {
       fullname : 'mary',
   prop:{
       fullname : 'alice',
       getFullname : function () {
           return this.fullname;
       }
   }
};

console.log(person.prop.getFullname());//alice
var test = person.prop.getFullname;
console.log(test());//hualp
</script>

当getFullname被分配到test变量时，上下文指的是全局变量（window）。这是因为test是被隐式设置为全局对象的属性。

注：this通常在对象的构造函数中使用，用来引用对象。总是指向调用该方法的对象

var iCar = new Object();
iCar.color = "red";
iCar.showColor = function(){
     alert(this.color);//输出"red"
};

例子：全局环境中的this

<script type="text/javascript"> 
    var name = "全局";
    function getName(){
        var name = "局部";
        return this.name;
    };
    alert(getName());//弹出 全局； 
</script>

函数getName()所处的对象是window对象，因此this也一定在window对象中。此时的this指向window对象，所以getName()返回的this.name其实是window.name，因此alert出全局。

结论：无论this身处何处，一定要找到函数运行时（或者说在何处被调用了）的位置。

通过不同调用语法，改变相同函数内部this的值：

<script type="text/javascript">
    var foo = {
        test:function(){
            alert(this);
        }
    }
    foo.test();//object,因为test方法在调用时属于foo对象局部

    var baz = foo.test;
    baz();//window,因为baz()被调用时属于global对象
</script>

局部环境中的this

<script type="text/javascript"> 
    var name = "全局";

    var jubu={
    name:"局部",
    getName:function(){
         return this.name;
     }
    };
    alert(jubu.getName());／／弹出局部
</script>

其中this身处的函数getName不是在全局环境中，而是处在jubu环境中。无论this身处何处，一定要找到函数运行时的位置。此时函数getName运行时的位置

显然，函数getName所在的对象是jubu，因此this的安身之处定然在jubu，即指向jubu对象，则getName返回的this.name其实是jubu.name，因此alert出来的是“局部”！

为何使用this？

因为在实例化对象时，总是不能确定开发者会使用什么样的变量名。使用this，即可在任意多个地方重用同个函数：

function showName(){
     alert(this.name);
}
var People1=new Object;
People1.name="mary";
People1.showName=showName;

var People2=new Object;
People2.name="jack";
People2.showName=showName;

People1.showName();//"mary"
People2.showName();//"jack"

二.也能指向一个对象

引用对象属性时，必须使用this关键字。

所有基于全局作用域的变量其实都是window的对象属性（property）。意味着在全局上下文中，this变量也能指向一个对象

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <script type="text/javascript"> 
        alert(this);//弹出 object window；
    </script>
</head>
<body>

三.作为构造函数调用

即通过这个函数生成一个新对象（object）。此时，this就指向这个新对象。

<script type="text/javascript"> 
        function test(){
            this.x = 10;
        }

        var obj = new test();
        alert(obj.x); //弹出 10；
 </script>


四.作用域链中的this

<script type="text/javascript">
function scoping () {
  console.log(this);

  return function () {
    console.log(this);
  };
}

scoping()();
>>window
>> window
</script>

因为scoping函数属于window对象，自然作用域链中的函数也属于window对象

五.对象中的this

可以用对象中的任何方法中用this来访问对象的属性，这与new得到的实例是不一样的。

var obj = {
    foo: "test",
    bar: function () {
        console.log(this.foo);
    }
};

obj.bar(); // "test"

六.重写this

无法重写this，为关键词

function test () {
    var this = {};  // Uncaught SyntaxError: Unexpected token this 
}

七.拓展jquery中的this

$()生成的是什么呢？实际上$()=jquery()，那么也就是说返回的是一个jquery的对象。

$(this)是jquery对象，能调用jquery的方法，例如click(), keyup()。

$(function () {
   $('button').click(function () {
       alert(this);//this 表示原生的DOM
       //$(this)表示当前对象，这里指的是button
   }) 
});

结论：

this，表示当前的上下文对象是一个html DOM对象，可以调用html对象所拥有的属性，方法。

$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jquery的方法和属性值。

八.this指针的call，apply，bind方法

Luna_hua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二.js中对this的理解

this对象在执行时是基于函数的执行环境绑定的。this是面向对象语言中的一个重要概念，在java，c#等大型语言中，this固定指向运行时的当前对象。但在js中，由于js的动态性（解释执行，当然也有简单的预编译过程），this的指向在运行时才确定。故它非常灵活，结合apply（call）方法，可以使其变得异常强大。一.在一般函数方法中this指代全局对象（此时this==window）
复制链接

扫一扫

专栏目录