javaScript中的this示例学习详解及工作原理


Posted in Javascript onJanuary 13, 2014

this的工作原理

如果一个函数被作为一个对象的方法调用,那么this将被指派为这个对象。

var parent = {
    method: function () {
        console.log(this);
    }
};parent.method();
// <- parent

注意这种行为非常“脆弱”,如果你获取一个方法的引用并且调用,那么this的值不会是parent了,而是window全局对象。这让大多数开发者迷惑。

ThisClownCar();
// <- Window
 

改动this

.call、 .apply 和.bind 方法用来操作调用函数的方式,帮我们定义this的值和传递给函数的参数值。

Function.prototype.call 可以有任意数量的参数,第一个参数被分配给this,剩下的被传递给调用函数。

Array.prototype.slice.call([1, 2, 3], 1, 2)
// <- [2]Function.prototype.apply 的行为和.call类似,但它传递给函数的参数是一个数组,而不是任意参数。
String.prototype.split.apply('13.12.02', ['.'])
// <- ['13', '12', '02']
 

Function.prototype.bind 创建一个特殊的函数,该函数将永远使用传递给.bind的参数作为this的值,以及能够分配部分参数,创建原函数的珂里化(curride)版本。

 

var arr = [1, 2];
var add = Array.prototype.push.bind(arr, 3);// effectively the same as arr.push(3)
add();
// effectively the same as arr.push(3, 4)
add(4);
console.log(arr);
// <- [1, 2, 3, 3, 4]

作用域链中的this

在下面的例子,this将无法在作用域链中保持不变。这是规则的缺陷,并且常常会给业余开发者带来困惑。

function scoping () {
  console.log(this);  return function () {
    console.log(this);
  };
}
scoping()();
// <- Window
// <- Window

有一个常见的方法,创建一个局部变量保持对this的引用,并且在子作用域中不能有同命变量。子作用域中的同名变量将覆盖父作用域中对this的引用。http://www.cnblogs.com/sosoft/

function retaining () {
  var self = this;  return function () {
    console.log(self);
  };
}
retaining()();
// <- Window
 

除非你真的想同时使用父作用域的this,以及当前this值,由于某些莫名其妙的原因,我更喜欢是使用的方法.bind函数。这可以用来将父作用域的this指定给子作用域。

 

function bound () {
  return function () {
    console.log(this);
  }.bind(this);
}bound()();
// <- Window
Javascript 相关文章推荐
小试JQuery的AutoComplete插件
May 04 Javascript
jQuery登陆判断简单实现代码
Apr 21 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
angularJS提交表单(form)
Feb 09 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
javascript中this指向详解
Apr 23 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
如何利用JavaScript编写一个格斗小游戏
Jan 06 Javascript
JS 日期比较大小的简单实例
Jan 13 #Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 #Javascript
JS OffsetParent属性深入解析
Jan 13 #Javascript
JavaScript网页定位详解
Jan 13 #Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 #Javascript
ie8本地图片上传预览示例代码
Jan 12 #Javascript
js 立即调用的函数表达式如何写
Jan 12 #Javascript
You might like
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
vue this.reload 方法 配置
2018/09/12 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
python读取浮点数和读取文本文件示例
2014/05/06 Python
在Python中使用正则表达式的方法
2015/08/13 Python
实例Python处理XML文件的方法
2015/08/31 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
2014标准社保办理委托书
2014/10/06 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
大学生入党群众意见书
2015/06/02 职场文书
python本地文件服务器实例教程
2021/05/02 Python
给numpy.array增加维度的超简单方法
2021/06/02 Python