JavaScript中的this机制


Posted in Javascript onJanuary 30, 2016

JavaScript有自己的一套this机制,在不同情况下,this的指向也不尽相同。

全局范围

console.log(this); //全局变量

全局范围使用this指向的是全局变量,浏览器环境下就是window。

注:ECMAScript5的strict模式不存在全局变量,这里的this是undefined。

函数调用中

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

foo(); //全局变量

函数调用中的this也指向全局变量。

注:ECMAScript5的strict模式不存在全局变量,这里的this是undefined。

对象方法调用

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

test.foo(); //test对象

对象方法调用中,this指向调用者。

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

var test2 = test.foo;
test2(); //全局变量

不过由于this的晚绑定特性,在上例的情况中this将指向全局变量,相当于直接调用函数。

这点非常重要,同样的代码段,只有在运行时才能确定this指向

构造函数

function Foo() {
  console.log(this);
}

new Foo(); //新创建的对象
console.log(foo);

在构造函数内部,this指向新创建的对象。

显式设置this

function foo(a, b) {
  console.log(this);
}

var bar = {};

foo.apply(bar, [1, 2]); //bar
foo.call(1, 2); //Number对象

使用Function.prototype的call或者apply方法是,函数内部this会被设置为传入的第一个参数。

Javascript 相关文章推荐
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
Vuex的实战使用详解
Oct 31 Javascript
vue 如何使用递归组件
Oct 23 Javascript
实现高性能JavaScript之执行与加载
Jan 30 #Javascript
深入探秘jquery瀑布流的实现
Jan 30 #Javascript
深入分析Javascript事件代理
Jan 30 #Javascript
详解javascript实现瀑布流列式布局
Jan 29 #Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 #Javascript
理解Javascript文件动态加载
Jan 29 #Javascript
JavaScript操作select元素和option的实例代码
Jan 29 #Javascript
You might like
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
JS DOM 操作实现代码
2010/08/01 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
jquery实现树形菜单完整代码
2015/12/29 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
python 实现归并排序算法
2012/06/05 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
浅析python实现动态规划背包问题
2020/12/31 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
销售实习自我鉴定
2013/12/07 职场文书
学生自我鉴定模板
2013/12/30 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
公务员个人年终总结
2015/02/12 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis
关于MySQL中explain工具的使用
2023/05/08 MySQL