编程 Javascript

javascript实现方法调用与方法触发小结

Posted in Javascript onMarch 26, 2016

在js中，this关键字是一个比较让人有意思的东西，但是它的指向经常让初学者摸不着头脑。

其实要理解这个关键字，需要理清两个问题——“方法的调用和方法的触发”

下面先看一段代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>function</title>
<script>
function showThis(){
  console.info(this);
}
  
function Test1(){
  this.f=showThis;
}
function Test2(){
  this.f=function(){
    showThis();
  }
}

showThis();//window
new Test1().f();//Test1  
new Test2().f();//window
</script>
</head>
<body>
</body>
</html>

20行打印出window对象，这个很容易理解，但是21行打印出Test1的实例对象，而22行却打印出window对象。查看Test1和Test2的构造，发现方法f最终都执行了showThis方法。但是showThis中的this指向却不同。这是因为Test1中的f方法直接指向showThis，new Test1().f()是以Test1 的实例直接调用showThis方法，调用者是Test1的实例。而new Test2().f()是在Test2的实例方法f中触发window对象的showThis方法，其中的this就是指向其调用者window而不是触发者Test2的实例。

至此可以发现。this指向的是调用者，而触发者只是推进调用者执行指定方法而已。

javascript实现方法调用与方法触发小结

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript CSS修改学习第一章查找位置

Feb 19 Javascript

jquery json 实例代码

Dec 02 Javascript

jQuery 联动日历实现代码

May 31 Javascript

js借助ActiveXObject实现创建文件

Sep 29 Javascript

jQuery实用小技巧_输入框文字获取和失去焦点的简单实例

Aug 25 Javascript

JS正则验证多个邮箱完整实例【邮箱用分号隔开】

Apr 19 Javascript

jqgrid实现简单的单行编辑功能

Sep 30 Javascript

vue实现图书管理demo详解

Oct 17 Javascript

vue2实现可复用的轮播图carousel组件详解

Nov 27 Javascript

vue2 全局变量的设置方法

Mar 09 Javascript

vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)

Nov 12 Javascript

Javascript设计模式之原型模式详细

Oct 05 Javascript

利用jquery制作滚动到指定位置触发动画

Mar 26 #Javascript

jQuery常用的一些技巧汇总

Mar 26 #Javascript

javascript拖拽应用实例（二）

Mar 25 #Javascript

几种经典排序算法的JS实现方法

Mar 25 #Javascript

javascript拖拽应用实例

Mar 25 #Javascript

JavaScript学习笔记之创建对象

Mar 25 #Javascript

JS实现的颜色实时渐变效果完整实例

Mar 25 #Javascript