zoukankan      html  css  js  c++  java
  • JavaScript进阶之this

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

    this是一个大利器,用好了就可以帮我们省掉很多事,然而事实上却总是让我们出错。自己就吃过很大的亏。现在咱们就来扒一扒this究竟是什么。
    自己看过很多博客或者帖子,看了之后总是感觉当时明白了。后面用的时候总是各种混乱。其实并非人家讲得不好,实在是自己没有真正理解到,后面通过做项目才算是看透了一些东西。

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

    那么这个对象究竟指的是什么。什么是对象。我们从以下几个方面来理解:

    • 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这个构造函数就可以创建一个对象。

    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代码变为

    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创建对象,直接调用这个函数会怎么样呢。我们把代码改成这样

    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。

    通过上面的例子我们可以看到,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的时候会有些不容易理解,网上有很多大牛写的关于对象的博客。大家可以去看看。后面要是有机会,笔者也尝试看能不能把对象也来说说清楚!!!

  • 相关阅读:
    Json,Gson,FastJson解析笔记
    Java 里把 InputStream 转换成 String 的几种方法
    11大Java开源中文分词器的使用方法和分词效果对比,当前几个主要的Lucene中文分词器的比较
    HDU 1599 find the mincost route
    如何更改Java括号中的默认对齐
    Android Java 与 C++ 恒调用,路径、文件名、延长的最大长度
    使用android SpannableStringBuilder实现图文混排,看到许多其他
    POJ 2352 Stars 树阵
    cocos2dx环境配置和打包
    DSR on Openstack POC
  • 原文地址:https://www.cnblogs.com/PengL-Net/p/5689151.html
Copyright © 2011-2022 走看看