怎样绑定this
有三种方法:
1. Function.prototype.call();
2. Function.prototype.apply();
3. Function.prototype.bind();
一、Function.prototype.call() 可以指定函数在参数对象环境下执行;
var obj = {
name: "李雷",
age: 33
}; var name = "韩梅梅"; function fn(){
console.log(this.name);
}; fn(); // "韩梅梅"
fn.call(obj); // "李雷"
注意:
1. 因为this.name表示当前函数所在对象环境中的变量name, 因此fn.call(obj)实际上是让fn()在obj环境下执行, 因此得到"李雷", 如果obj中没有name属性, 则会返回undefined.
2. 如果不给参数对象, 或填写null/ undefined / window, 则会将函数在全局对象环境下执行.
3. 如果参数为基本类型, 则会自动转为包装对象后执行.
function f() {
return this;
} f.call(5); // [[PrimitiveValue]]: 5
4. 也可以Function.prototype.call()方法可以有多个参数, 其中第一个是需要绑定this的目标对象, 后面的参数是函参;
二、Function.prototype.apply() 也可以指定函数在参数对象环境下执行, 不过他的第二个参数是一个数组, 表示调用函数的函参.
var arr = [1,2,3]; function join(){
var str = '';
for (item in arguments) {
str += String(arguments[item]);
};
return str;
} join.apply(this, arr); // "123"
也就是说, .call() 和 .apply()功能其实是一样的, 只是调用他们的函数的函参有的是有限的个数的, 有的是不定个数的, .call()适用于有限个数参数的函数, .apply()适用于不定个数参数的函数, 不过ES6里面可以直接用 "..." 运算符实现数组/类数组对象到单个函参的转变, 这样就多了一个.apply()的替代方法.
var arr = [1,2,3]; function join(){
var str = '';
for (item in arguments) {
str += String(arguments[item]);
};
return str;
} join.call(this, ...arr); // "123"
三、Function.prototype.bind() 可以将函数内部的this改为指向参数对象, 使其可以在参数对象环境下执行
.call()和.apply()都是让函数在参数对象下执行, 但都是立即执行的, 而.bind()则是会返回一个新的函数(方法), 这个函数(方法)可以供后续调用.
var date = new Date();
var getTime = date.getTime.bind(date);
getTime(); //
如果不使用.bind(), 因为.getTime()内部的this绑定的是一个Date对象, 所以会报错, 如果.bind()了一个Date()对象, 那getTime这个函数内部指向就会从window改为date;
怎样绑定this的更多相关文章
- ASP.NET Core MVC/WebAPi 模型绑定探索
前言 相信一直关注我的园友都知道,我写的博文都没有特别枯燥理论性的东西,主要是当每开启一门新的技术之旅时,刚开始就直接去看底层实现原理,第一会感觉索然无味,第二也不明白到底为何要这样做,所以只有当你用 ...
- MVVM设计模式和WPF中的实现(四)事件绑定
MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- MVVM模式解析和在WPF中的实现(三)命令绑定
MVVM模式解析和在WPF中的实现(三) 命令绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- 冒泡,setinterval,背景图的div绑定事件,匿名函数问题
1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...
- Xamarin+Prism开发详解二:Xaml文件如何简单绑定Resources资源文件内容
我们知道在UWP里面有Resources文件xxx.resx,在Android里面有String.Xml文件等.那跨平台如何统一这些类别不一的资源文件以及Xaml设计文件如何绑定这些资源?应用支持多国 ...
- 数据的双向绑定 Angular JS
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
- Html.DropDownLis绑定数据库
效果: 方法一: View: <div class="col-md-md-4"> <div class="input-group"> & ...
- ASP.NET MVC——模型绑定
这篇文章我们来讲讲模型绑定(Model Binding),其实在初步了解ASP.NET MVC之后,大家可能都会产生一个疑问,为什么URL片段最后会转换为例如int型或者其他类型的参数呢?这里就不得不 ...
- Spring MVC初始化参数绑定
初始化参数绑定与类型转换很类似,初始化绑定时,主要是参数类型 ---单日期 在处理器类中配置绑定方法 使用@InitBinder注解 在这里首先注册一个用户编辑器 参数一为目标类型 proper ...
- SpringMVC初始化参数绑定--日期格式
一.初始化参数绑定[一种日期格式] 配置步骤: ①:在applicationcontext.xml中只需要配置一个包扫描器即可 <!-- 包扫描器 --> <context:comp ...
随机推荐
- bad object refs/remotes/origin/HEAD
How to handle git gc fatal: bad object refs/remotes/origin/HEAD error: failed to run repack I random ...
- Linux shell脚本 (十二)case语句
case语句 case ... esac 与其他语言中的 switch ... case 语句类似,是一种多分枝选择结构. case 语句匹配一个值或一个模式,如果匹配成功,执行相匹配的命令.case ...
- angular自定义组件
https://cli.angular.io/ 打开终端创建header组件: ng g component components/header import { Component, OnInit ...
- osg create shape
osg::ref_ptr<osg::Node> OSG_Qt_::createSimple() { osg::ref_ptr<osg::Geode> geode = new o ...
- 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_16-网关-过虑器
4.5 过虑器 Zuul的核心就是过虑器,通过过虑器实现请求过虑,身份校验等. 4.5.1 ZuulFilter 自定义过虑器需要继承 ZuulFilter,ZuulFilter是一个抽象类,需要覆盖 ...
- RVCT编译错误 Cannot obtain license for Compiler
找不到文件 找不到文件 Error: C9932E: Cannot obtain license for Compiler (feature compiler) with license versio ...
- OpenStack Magnum项目简介
1 项目简介 Magnum是OpenStack中一个提供容器集群部署的服务. Magnum是一个Pass层的OpenStack项目. Magnum使用Heat部署一个包含Docker和Kubernet ...
- ubuntu18.04 install rar
sudo apt-get update #如果好久没有更新资源建议update一次 sudo apt-get install rar #安装rar sudo apt-get install unrar ...
- (十)会话跟踪技术之Session
---部分转自孤傲苍狼博客 一.Session简单介绍 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下).因此 ...
- iOS-登录加密也许用到,反转字符串
- (NSString *)stringByReversed{// NSMutableString *s = [NSMutableString string];// for (NSUInt ...