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 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
javascript 简练的几个函数
Aug 29 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
php基于redis处理session的方法
Mar 14 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
JavaScript window.document的属性、方法和事件小结
2012/10/24 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
python 实现视频流下载保存MP4的方法
2019/01/09 Python
python安装及变量名介绍详解
2020/12/12 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
工商管理系学生的自我评价分享
2013/11/29 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
户外拓展活动方案
2014/02/11 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
企业元宵节主持词
2014/03/25 职场文书
讲解员培训方案
2014/05/04 职场文书
工程负责人任命书
2014/06/06 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
建国大业观后感800字
2015/06/01 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书