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 31 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
如何在AngularJs中调用第三方插件库
May 21 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 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
php 获取完整url地址
2008/12/20 PHP
PHP 金额数字转换成英文
2010/05/06 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
用python实现面向对像的ASP程序实例
2014/11/10 Python
详解Python编程中time模块的使用
2015/11/20 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
django最快程序开发流程详解
2019/07/19 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
基于pandas中expand的作用详解
2019/12/17 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
秋季运动会表扬稿
2014/01/16 职场文书
干部培训自我鉴定
2014/01/22 职场文书
无房证明范本
2014/09/17 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
2014年节能工作总结
2014/12/18 职场文书
期中考试复习计划
2015/01/19 职场文书
2015年政教主任工作总结
2015/07/23 职场文书