JavaScript进阶之this

时间 2019-11-29

原文原文链接

javascript的this，一个不知道究竟属于谁的东西

this是一个大利器，用好了就能够帮咱们省掉不少事，然而事实上却老是让咱们出错。本身就吃过很大的亏。如今我们就来扒一扒this到底是什么。
本身看过不少博客或者帖子，看了以后老是感受当时明白了。后面用的时候老是各类混乱。其实并不是人家讲得很差，实在是本身没有真正理解到，后面经过作项目才算是看透了一些东西。javascript

首先咱们得死记一句话，this指向的是当前对象。

那么这个对象究竟指的是什么。什么是对象。咱们从如下几个方面来理解：html

JavaScript是一种弱类型的语言，和一些强类型的语言如java，C#等不一样。js的对象和他们的对象不同，js的全部数据都是对象，广泛的对象就是若干键值对的组合。而在java，C#中是先有类，再经过类来建立实例，这个实例叫作对象。ps：在ES6中js推出了class这个概念（本人表示很是喜欢这样发展）。
js全部数据都是对象，言外之意就是：number，array，function，null，erro,reg,date,{一系列键值对的组合}等等数据类型均可以看做对象。
咱们有多种方式建立对象，new functionName或者直接var Myobject={一系列键值对}等等

下面咱们就来用一个demo来看看吧

首先咱们建立一个构造函数。这个构造函数相似于Java中类的构造函数，Js的构造函数的目的也是初始化值的做用，只是JS中无需先写class，直接写一个构造函数而后new这个构造函数就能够建立一个对象。java

var person=function (name) {
     this.name=name;
     this.show=function () {
         alert("个人名字是 "+this.name);
     }
}

咱们能够看到构造函数里面有this，这个this.name就是指向这个函数中建立的name；符合咱们以前的那句话，this指向当前对象。

咱们再添加一段Html代码以显示效果函数

<body>
<div>
    <div>
        <button id="test">查看爱好</button>
    </div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>

而后咱们为这个id为test的按钮绑定一个事件，此时js代码变为this

var person=function (name) {
     this.name=name;
     this.show=function () {
         alert("个人名字是 "+this.name);
     }
}

var pengl=new person("PengL");
document.getElementById("test").addEventListener("click",function() {
    pengl.show();
});

咱们点击这个按钮能够看到调试

如今咱们来分析一下代码，咱们经过var pengl=new person("PengL");来建立了一个对象，此时this指向的即是PengL这个当前对象，而后将对象的show方法绑定为按钮的点击事件，点击按钮后经过弹出框能够看到this.name指向的名字。说明到如今为止。this，指向当前对象仍然是正确的。

那么问题来了，若是咱们不用new建立对象，直接调用这个函数会怎么样呢。咱们把代码改为这样code

var person=function (name) {
     this.name=name;
     this.show=function () {
         alert("个人名字是 "+this.name);
     }
}

//var pengl=new person("PengL");
var pengl=person("PengL");

document.getElementById("test").addEventListener("click",function() {
    pengl.show();
});

而后运行点击按钮查看效果，这时咱们发现没有反应，咱们打开控制台调试看，发现报错

咱们能够看到控制台下面显示show属性undefined，为何会这样。明明在构造函数中定义了show的呀。然而实际状况是这样：咱们此次没有新建对象，而是直接把函数赋给了变量PengL，这时咱们须要考虑的问题是什么？当前对象是谁？是这个函数吗？函数不也是对象吗？事实是若是没有新建对象。那么这些普通函数都属于一个大对象，那就是document对象。因此如今this，指的是document对象。而document对象并无定义show方法，因此此时报错show为undefined。htm

经过上面的例子咱们能够看到，this指向当前对象并无错，重点是咱们得弄明白当前对象是哪一个，好比咱们直接在html代码中添加onclick事件

<button  value="aihao" onclick="GetButton(this.value)">
    查看爱好
</button>

这时这个this指向的即是button元素这个对象，this.value即可以获取button的value值。

如过在js中经过this来获取value值

function GetButton () {
 alert(this.value);  
}

这时this指向的即是document对象，又会出现value undefined的错误了。

经过以上例子咱们总结出如下几点：对象

找准当前对象是谁
this指向当前对象
建立对象后this才能指向这个对象，直接调用函数是没用的
普通函数和全局变量等属于的对象都是document

这就是我想要分享的对于this的理解，可能有些同窗对于js的对象这有一些不熟悉，看demo的时候会有些不容易理解，网上有不少大牛写的关于对象的博客。你们能够去看看。后面要是有机会，笔者也尝试看能不能把对象也来讲说清楚!!!blog