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 相关文章推荐
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
使用JS读秒使用示例
Sep 21 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
vue vant Area组件使用详解
Dec 09 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中实现获取IP和地理位置类分享
2015/02/10 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
Python 元类使用说明
2009/12/18 Python
Python常见数据结构详解
2014/07/24 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
python中wheel的用法整理
2020/06/15 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
文员自我评价怎么写
2013/09/19 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
采购助理岗位职责
2014/02/16 职场文书
2014年党务公开方案
2014/05/08 职场文书
青年文明号口号
2014/06/17 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技