彻底理解了call()方法,apply()方法和bind()方法
javascript中的每一个作用域中都有一个this对象,它代表的是调用函数的对象。在全局作用域中,this代表的是全局对象(在web浏览器中指的是window)。如果包含this的函数是一个对象的方法,this指向的就是这个对象。因此在上面例子中就不用直接写对象的名字,而是使用this代替它,例如:
var human = {
name: '霍林林',
sayName: function(){
console.log(this.name);
}
}
human.sayName();
下面这个例子中,我们直接使用person.name,这种做法会增加方法与对象之间的耦合度(它们之间的依赖性变强了)。这样写是有问题的 ,如果我们的变量名修改了,我们必须同时修改方法中的变量名。幸运的是,JavaScript给我们提供了解决这个问题的方法。
var person = {
name: '霍林林',
sayName: function(){
console.log(person.name);
}
}
person.sayName();
1.改变this
this通常是被自动赋值的,但是我们可以改变this的指向。JavaScript给我们提供了 3 中 函数方法 来改变this的指向。
2.call()方法
这个方法的第一个参数表示this指向的对象,后面的所有参数都是函数的参数。例如:
function sayName(label) {
console.log(label+'--->'+this.name);
}
var name = '张三';
var person1 = {
name: '李四'
};
var person2 = {
name: '王二'
};
sayName.call(window,'global'); //'global--->张三'
sayName.call(person1,'person1'); //'person1--->李四'
sayName.call(person2,'person2'); //'person2--->王二'
3.apply()方法
這個方法和call方法的作用都是相同的,只不过在传递参数时候,call方法可以传递多个参数,而apply方法只能传递一个方法,并且要求是一个数组。
function sayName(label) {
console.log(label);
console.log(this.name);
}
var name = '张三';
var person1 = {
name: '李四'
};
var person2 = {
name: '王二'
};
sayName.apply(window,['global']); //'global--->张三'
sayName.apply(person1,['person1']); //'person1--->李四'
sayName.apply(person2,['person2']); //'person2--->王二'
4.bind()方法
bind()方法第一个参数是我们希望函数中this指向的对象,后面的参数是我们希望给函数的参数绑定的值。
var obj = {
name:'小明'
age:23
};
function myName(age,gender){
console.log(this.name,age,gender);
}
var newName = myName.bind(obj);
newName(); //小明 undefined undefined
var newName2 = myName.bind(obj,18);
newName2(); //小明 18 undefined
var newName3 = myName.bind(obj,18,'女');
newName3(); //小明 18 女
var newName4 = myName.bind(obj);
newName4(18,'女'); //小明 18 女
彻底理解了call()方法,apply()方法和bind()方法的更多相关文章
- JavaScript中的apply()方法和call()方法使用介绍
1.每个函数都包含两个非继承而来的方法:apply()和call(). 2.他们的用途相同,都是在特定的作用域中调用函数. 3.接收参数方面不同,apply()接收两个参数,一个是函数运行的作用域(t ...
- JS中的call()和apply()方法和bind()
1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...
- ASP.NET的Eval方法和Bind方法的区别
Eval是只读的方法(单向数据在邦定),所邦定的内容为不会提交回服务器. 比如图书的ISBN,并不想让用户做任何修改,可以使用<%# Eval('ISBN').TOString().Trim() ...
- JavaScript的apply()方法和call()方法
1 <script type="text/javascript"> 2 /*定义一个人类*/ 3 function Person(name,age) 4 { 5 thi ...
- apply方法和call方法的详解2
1.apply和call的区别在哪里 2.什么情况下用apply,什么情况下用call 3.apply的其他巧妙用法(一般在什么情况下可以使用apply) 我首先从网上查到关于apply和call的定 ...
- apply方法和call方法。函数属性与方法。
每个函数都有length属性哥prototype属性. length属性表示的是函数接入参数的个数 在es引用类型语言中,prototype是保存它们所有实例方法的真正所在.换句话来说,类似于toSt ...
- AngularJs $scope 里面的$apply 方法和$watch方法
Angular $scope 里面的$apply 方法 Scope提供$apply方法传播Model变化 <!DOCTYPE html> <html> <head> ...
- apply()方法和call()方法
obj.func.call(obj1) //是将obj1看做obj,调用func方法,将第一个参数看做函数调用的对象,可以看做,将obj的方法给obj1使用 ECMAScript规范给所有 ...
- 记录一个python公式罗列的方法 join()方法和map()方法的妙用
题干: 怎样将一个列表中的元素读出,并列出计算式子 比如:[,,,] 输出:+++ = 列表中的元素个数不定 小白和大神的方法: #小白的 numlist=[,,,] sum1='' cal='+' ...
随机推荐
- 使用Angular CLI从蓝本生成代码
第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 这篇文章主要是讲生 ...
- 初探JodaTime
在学习java之初时就使用过jdk自带的java.util.Calendar ,近期的项目中需要达到类似功能的时候使用了JodaTime. Joda-Time 令时间和日期值变得易于管理.操作和理解. ...
- 1-4 criteria用法大全
Criteria的完整用法 QBE (Query By Example) Criteria cri = session.createCriteria(Student.class); cri.add(E ...
- Spring Clould负载均衡重要组件:Ribbon中重要类的用法
Ribbon是Spring Cloud Netflix全家桶中负责负载均衡的组件,它是一组类库的集合.通过Ribbon,程序员能在不涉及到具体实现细节的基础上"透明"地用到负载均衡 ...
- Linux快速搭建FTP服务器
FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为"文传协议".用于Internet上的控制文件的双向传输.同时,它也是一个应用程序(A ...
- 【Linux】 升级CentOS6的内核到3.10
升级内核 最近有一些虚拟机,想装Dokcer,但是实验之后发现Docker基本上只在3.0以上的linux内核版本中才能稳定运行.所以就面临着把CentOS6的2.6内核升级到3.0以上.下面提供两种 ...
- ubuntu apt-get安装、卸载软件命令及如何查看日志
linux亮红灯的我,开始学习linux,学习使我快乐,大家一起来学习... 1.安装软件命令 sudo apt-get apache2 安装apache,安装在默认路径下,指定路径安装,其实 ...
- java人民币读法转换
实现浮点数转换成人民币读法字符串 编写一个程序,将浮点数转换成人民币读法字符串,例如,将1006.333转换为壹千零陆元叁角叁分. 题意分析: 将浮点数分成整数部分和小数部分,分开处理整数部分和小数部 ...
- [luogu1168]中位数_优先队列
中位数 题目大意:输出读入的前2*k+1个数的中位数.一共有n个数,按照读入顺序. 注释:$1\le n \le 10^9$. 想法:这是优先队列的一个应用qwq.我们弄两个堆.小根堆和大根堆,保证: ...
- Android API
http://www.cnblogs.com/over140/tag/Android%20API%20%E4%B8%AD%E6%96%87/