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 相关文章推荐
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 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学习笔记之字符串编码的转换和判断
2014/05/22 PHP
菜鸟javascript基础整理1
2010/12/06 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
简单介绍Python中的struct模块
2015/04/28 Python
Python通过poll实现异步IO的方法
2015/06/04 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
竞选演讲稿范文
2013/12/28 职场文书
运动会入场词60字
2014/02/15 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
车间质检员岗位职责
2015/04/08 职场文书
项目备案申请报告
2015/05/15 职场文书
2015年教研员工作总结
2015/05/26 职场文书
运输公司工作总结
2015/08/11 职场文书
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS