javascript中this的四种用法


Posted in Javascript onMay 11, 2015

this

在函数执行时,this 总是指向调用该函数的对象。要判断 this 的指向,其实就是判断 this 所在的函数属于谁。

在《javaScript语言精粹》这本书中,把 this 出现的场景分为四类,简单的说就是:

有对象就指向调用对象
没调用对象就指向全局对象
用new构造就指向新对象
通过 apply 或 call 或 bind 来改变 this 的所指。

1) 函数有所属对象时:指向所属对象

函数有所属对象时,通常通过 . 表达式调用,这时 this 自然指向所属对象。比如下面的例子:

var myObject = {value: 100};
myObject.getValue = function () {
 console.log(this.value); // 输出 100

 // 输出 { value: 100, getValue: [Function] },
 // 其实就是 myObject 对象本身
 console.log(this);

 return this.value;
};

console.log(myObject.getValue()); // => 100

getValue() 属于对象 myObject,并由 myOjbect 进行 . 调用,因此 this 指向对象 myObject。

2) 函数没有所属对象:指向全局对象

var myObject = {value: 100};
myObject.getValue = function () {
 var foo = function () {
  console.log(this.value) // => undefined
  console.log(this);// 输出全局对象 global
 };

 foo();

 return this.value;
};

console.log(myObject.getValue()); // => 100

在上述代码块中,foo 函数虽然定义在 getValue 的函数体内,但实际上它既不属于 getValue 也不属于 myObject。foo 并没有被绑定在任何对象上,所以当调用时,它的 this 指针指向了全局对象 global。

据说这是个设计错误。

3) 构造器中的 this:指向新对象

js 中,我们通过 new 关键词来调用构造函数,此时 this 会绑定在该新对象上。

var SomeClass = function(){
 this.value = 100;
}

var myCreate = new SomeClass();

console.log(myCreate.value); // 输出100

顺便说一句,在 js 中,构造函数、普通函数、对象方法、闭包,这四者没有明确界线。界线都在人的心中。

4) apply 和 call 调用以及 bind 绑定:指向绑定的对象

apply() 方法接受两个参数第一个是函数运行的作用域,另外一个是一个参数数组(arguments)。

call() 方法第一个参数的意义与 apply() 方法相同,只是其他的参数需要一个个列举出来。

简单来说,call 的方式更接近我们平时调用函数,而 apply 需要我们传递 Array 形式的数组给它。它们是可以互相转换的。

var myObject = {value: 100};

var foo = function(){
 console.log(this);
};

foo(); // 全局变量 global
foo.apply(myObject); // { value: 100 }
foo.call(myObject); // { value: 100 }

var newFoo = foo.bind(myObject);
newFoo(); // { value: 100 }

以所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
原生javascript获取元素样式属性值的方法
Dec 25 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
Boostrap入门准备之border box
May 09 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 #Javascript
javascript实现炫酷的拖动分页
May 11 #Javascript
JS+CSS实现的拖动分页效果实例
May 11 #Javascript
浅谈jQuery构造函数分析
May 11 #Javascript
在JavaScript中正确引用bind方法的应用
May 11 #Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 #Javascript
javascript实现验证IP地址等相关信息代码
May 10 #Javascript
You might like
PHP 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
VBScript版代码高亮
2006/06/26 Javascript
奇妙的js
2007/09/24 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
js的.innerHTML = ""IE9下显示有错误的解决方法
2013/09/16 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python六大开源框架对比
2015/10/19 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
办公室驾驶员岗位职责
2013/11/15 职场文书
文明学生事迹材料
2014/01/29 职场文书
副总经理任命书
2014/06/05 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
法律讲堂观后感
2015/06/11 职场文书
如何理解python接口自动化之logging日志模块
2021/06/15 Python
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
德劲DE1105机评
2022/04/05 无线电
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技