来自百度知道解释

JavaScript:this是什么?

定义:this是包含它的函数作为方法被调用时所属的对象
说明:这句话有点咬嘴,但一个多余的字也没有,定义非常准确,我们可以分3部分来理解它!
1、包含它的函数。2、作为方法被调用时。3、所属的对象。
看例子:

function to_green(){
this.style.color="green";
}
to_green();

上面函数中的this指的是谁?

分析:包含this的函数是,to_green
该函数作为方法被调用了
该函数所属的对象是。。?我们知道默认情况下,都是window对象。
OK,this就是指的window对象了,to_green中执行语句也就变为,window.style.color="green"
这让window很上火,因为它并没有style这么个属性,所以该语句也就没什么作用。
我们在改一下。

window.load=function(){
var example=document.getElementById("example");
example.onclick=to_green;
}

这时this又是什么呢?

我们知道通过赋值操作,example对象的onclick得到to_green的方法,那么包含this的函数就是onclick喽,
那么this就是example引用的html对象喽。
this的环境可以随着函数被赋值给不同的对象而改变!
下面是完整的例子:

<script type="text/javascript">
function to_green(){
this.style.color="green";
}
function init_page(){
var example=document.getElementById("example");
example.onclick=to_green;
}
window.onload=init_page;
</script>
<a href="#" id="example">点击变绿</a>

JavaScript 语言中的 this

由于其运行期绑定的特性,JavaScript 中的 this 含义要丰富得多,它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。

JavaScript 中函数的调用有以下几种方式:作为对象方法调用,作为函数调用,作为构造函数调用,和使用 apply 或 call 调用。

下面我们将按照调用方式的不同,分别讨论 this 的含义。

作为对象方法调用

在 JavaScript 中,函数也是对象,因此函数可以作为一个对象的属性,此时该函数被称为该对象的方法,在使用这种调用方式时,this 被自然绑定到该对象。

清单 1. point.js
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
this.x = this.x + x;
this.y = this.y + y;
}
}; point.moveTo(1, 1)//this 绑定到当前对象,即 point 对象

作为函数调用

函数也可以直接被调用,此时 this 绑定到全局对象。在浏览器中,window 就是该全局对象。比如下面的例子:函数被调用时,this 被绑定到全局对象,接下来执行赋值语句,相当于隐式的声明了一个全局变量,这显然不是调用者希望的。

清单 2. nonsense.js
 function makeNoSense(x) {
this.x = x;
} makeNoSense(5);
x;// x 已经成为一个值为 5 的全局变量

对于内部函数,即声明在另外一个函数体内的函数,这种绑定到全局对象的方式会产生另外一个问题。我们仍然以前面提到的 point 对象为例,这次我们希望在 moveTo 方法内定义两个函数,分别将 x,y 坐标进行平移。结果可能出乎大家意料,不仅 point 对象没有移动,反而多出两个全局变量 x,y。

清单3. point.js
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
// 内部函数
var moveX = function(x) {
this.x = x;//this 绑定到了哪里?
};
// 内部函数
var moveY = function(y) {
this.y = y;//this 绑定到了哪里?
}; moveX(x);
moveY(y);
}
};
point.moveTo(1, 1);
point.x; //==>0
point.y; //==>0
x; //==>1
y; //==>1

这属于 JavaScript 的设计缺陷,正确的设计方式是内部函数的 this 应该绑定到其外层函数对应的对象上,为了规避这一设计缺陷,聪明的 JavaScript 程序员想出了变量替代的方法,约定俗成,该变量一般被命名为 that。

清单 4. point2.js
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
var that = this;
// 内部函数
var moveX = function(x) {
that.x = x;
};
// 内部函数
var moveY = function(y) {
that.y = y;
}
moveX(x);
moveY(y);
}
};
point.moveTo(1, 1);
point.x; //==>1
point.y; //==>1

作为构造函数调用

JavaScript 支持面向对象式编程,与主流的面向对象式编程语言不同,JavaScript 并没有类(class)的概念,而是使用基于原型(prototype)的继承方式。

相应的,JavaScript 中的构造函数也很特殊,如果不使用 new 调用,则和普通函数一样。作为又一项约定俗成的准则,构造函数以大写字母开头,提醒调用者使用正确的方式调用。如果调用正确,this 绑定到新创建的对象上。

清单 5. Point.js
function Point(x, y){
this.x = x;
this.y = y;
}

使用 apply 或 call 调用

让我们再一次重申,在 JavaScript 中函数也是对象,对象则有方法,apply 和 call 就是函数对象的方法。这两个方法异常强大,他们允许切换函数执行的上下文环境(context),即 this 绑定的对象。很多 JavaScript 中的技巧以及类库都用到了该方法。让我们看一个具体的例子:

清单 6. Point2.js
 function Point(x, y){
this.x = x;
this.y = y;
this.moveTo = function(x, y){
this.x = x;
this.y = y;
}
} var p1 = new Point(0, 0);
var p2 = {x: 0, y: 0};
p1.moveTo(1, 1);
p1.moveTo.apply(p2, [10, 10]);

在上面的例子中,我们使用构造函数生成了一个对象 p1,该对象同时具有 moveTo 方法;使用对象字面量创建了另一个对象 p2,我们看到使用 apply 可以将 p1 的方法应用到 p2 上,这时候 this 也被绑定到对象 p2 上。另一个方法 call 也具备同样功能,不同的是最后的参数不是作为一个数组统一传入,而是分开传入的。

javascript中的this到底指什么?的更多相关文章

  1. python中的cls到底指的是什么

    python中的cls到底指的是什么,与self有什么区别? 2018年07月31日 11:13:09 rs勿忘初心 阅读数:7769   作者:秦风链接:https://www.zhihu.com/ ...

  2. http协议无状态中的 "状态" 到底指的是什么?!

    引子: 最近在好好了解http,发现对介绍http的第一句话[http协议是无状态的,无连接的]就无法理解了:无状态的[状态]到底指的是什么?! 找了很多资料不仅没有发现有一针见血正面回答这个问题的, ...

  3. Javascript中的Prototype到底是什么

    Javascript也是面向对象的语言,但它是一种基于原型Prototype的语言,而不是基于类的语言.在Javascript中,类和对象看起来没有太多的区别. 什么是prototype: funct ...

  4. http协议无状态中的 "状态" 到底指的是什么?!(转载)

    转载自:https://www.cnblogs.com/bellkosmos/p/5237146.html   引子: 最近在好好了解http,发现对介绍http的第一句话[http协议是无状态的,无 ...

  5. JavaScript中的this到底是怎样的?

    this是困惑JavaScript开发者的一大‘毒瘤’,在开发过程中,但凡用到this的时候,我们都会很头疼,那么这个this在JavaScript中到底是怎么样的?身为一个前端coder,这是一个避 ...

  6. Javascript中的Prototype到底是啥

    Javascript也是面向对象的语言,但它是一种基于原型Prototype的语言,而不是基于类的语言.在Javascript中,类和对象看起来没有太多的区别. 通常,这样创建一个对象: functi ...

  7. this详解:JAVASCRIPT中的this到底是谁?

    语法 this 全局对象 在全局执行上下文(函数之外),this引用的是全局对象. console.log(this.document === document); // true // In web ...

  8. 在JavaScript中,this关键字指什么?

    指向对象.window.方法. 例子1 function a(){//当前调用栈是a,因此a的调用位置是全局作用域 console.log('a'); b();// b的调用位置 } function ...

  9. 理解KNN算法中的k值-knn算法中的k到底指的是什么 ?

    2019-11-09 20:11:26为方便自己收藏学习,转载博文from:https://blog.csdn.net/llhwx/article/details/102652798 knn算法是指对 ...

随机推荐

  1. python 翻转棋(othello)

    利用上一篇的框架,再写了个翻转棋的程序,为了调试minimax算法,花了两天的时间. 几点改进说明: 拆分成四个文件:board.py,player.py,ai.py,othello.py.使得整个结 ...

  2. QT要点

    1. QT设计器最终会被解释为ui_**.h. 2. QString与init之间的转换: QString转int: bool bIsOk; int a = str.toInt( &bIsOk ...

  3. datatables.js 简单使用--弹出编辑框或添加数据框

    内容:选中某一条记录,弹出编辑框 环境:asp.net mvc ,  bootstrap 显示效果: 代码: 至于怎么弄多选框,在上一篇博客里已经有说明. 主要用到了bootstrap的模态窗,下面代 ...

  4. 部署AlwaysOn第三步:集群资源组的健康检测和故障转移

    资源组是由一个或多个资源组成的组,WSFC的故障转移是以资源组为单位的,资源组中的资源是相互依赖的.一个资源所依赖的其他资源必须和该资源处于同一个资源组,跨资源组的依赖关系是不存在的.在任何时刻,每个 ...

  5. 用10分钟,搭建图像处理编程环境,0失败!(python语言,windows系统)

    以前,你可能看过很多的文章,开始搭建一个图像处理的编程环境. 结果,按照教程一步一步做的时候,总是出现各种各样的问题. 就算成功了,后续开发过程中要用到不同版本的opencv,不同版本python,更 ...

  6. 关于InfiniBand几个基本知识点解释

    文章出处: https://blog.csdn.net/BtB5e6Nsu1g511Eg5XEg/article/details/83629279 公众号 https://blog.csdn.net/ ...

  7. vue.js指令总结

    1.v-html 用于输出真正html,而不是纯文本. 2.v-text 输出纯文本. <!DOCTYPE html> <html lang="en"> & ...

  8. A. Elections

    链接 [http://codeforces.com/contest/1043/problem/A] 题意 有n个投票人已经投个对手ai票,让你求最小的k使得k-ai加起来大于,对手得票总和 分析 一个 ...

  9. 决胜 Poker

    团队展示 队名 决胜 Poker 团队人员 211606392 郑俊瑜 (队长) 211606355 陈映宏 211606358 陈卓楠 211606386 姚皓钰 211606323 刘世华 211 ...

  10. python3 selenium打开Chrome报错闪退问题

    ChromeDriver不匹配 Google Chrome 已是最新版本 版本 64.0.3282.186(正式版本) (32 位)   ChromeDriver应该选择2.35 下载链接:https ...