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()方法的更多相关文章

  1. JavaScript中的apply()方法和call()方法使用介绍

    1.每个函数都包含两个非继承而来的方法:apply()和call(). 2.他们的用途相同,都是在特定的作用域中调用函数. 3.接收参数方面不同,apply()接收两个参数,一个是函数运行的作用域(t ...

  2. JS中的call()和apply()方法和bind()

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  3. ASP.NET的Eval方法和Bind方法的区别

    Eval是只读的方法(单向数据在邦定),所邦定的内容为不会提交回服务器. 比如图书的ISBN,并不想让用户做任何修改,可以使用<%# Eval('ISBN').TOString().Trim() ...

  4. JavaScript的apply()方法和call()方法

    1 <script type="text/javascript"> 2 /*定义一个人类*/ 3 function Person(name,age) 4 { 5 thi ...

  5. apply方法和call方法的详解2

    1.apply和call的区别在哪里 2.什么情况下用apply,什么情况下用call 3.apply的其他巧妙用法(一般在什么情况下可以使用apply) 我首先从网上查到关于apply和call的定 ...

  6. apply方法和call方法。函数属性与方法。

    每个函数都有length属性哥prototype属性. length属性表示的是函数接入参数的个数 在es引用类型语言中,prototype是保存它们所有实例方法的真正所在.换句话来说,类似于toSt ...

  7. AngularJs $scope 里面的$apply 方法和$watch方法

    Angular $scope 里面的$apply 方法 Scope提供$apply方法传播Model变化 <!DOCTYPE html> <html> <head> ...

  8. apply()方法和call()方法

    obj.func.call(obj1)       //是将obj1看做obj,调用func方法,将第一个参数看做函数调用的对象,可以看做,将obj的方法给obj1使用 ECMAScript规范给所有 ...

  9. 记录一个python公式罗列的方法 join()方法和map()方法的妙用

    题干: 怎样将一个列表中的元素读出,并列出计算式子 比如:[,,,] 输出:+++ = 列表中的元素个数不定 小白和大神的方法: #小白的 numlist=[,,,] sum1='' cal='+' ...

随机推荐

  1. js制作列表滚动(有滚动条)

    function mouseWheel(obj, fn){ var ff = navigator.userAgent.indexOf("Firefox"); if (ff != - ...

  2. selenium 基础(一)

    selenium安装 pip install selenium selenium操作浏览器原理 早期selenium 1.0 用的selenium RC, 后来selenum2集合了selenium1 ...

  3. 什么是DOM,DOM level 1\2\3 的区别是什么

    DOM 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.Document Object Model的历史可以追溯至1990年 ...

  4. 【Python】 uuid生成唯一ID

    uuid uuid是128位的全局唯一标识符(univeral unique identifier),通常用32位的一个字符串的形式来表现.有时也称guid(global unique identif ...

  5. centos7 nginx安装/启动/进程状态/杀掉进程

    1.安装     下载RPM:wget http://nginx.org/packages/centos/7/x86_64/RPMS/nginx-1.10.0-1.el7.ngx.x86_64.rpm ...

  6. Suricata默认规则集相关

    Suricata规则集 Suricata 基于规则检测和控制数据流量,所有规则的配置文件保存在rules目录内 .这些是已知和确认的活动僵尸网络和其C&C(command and contro ...

  7. 分享:docker swarm集群搭建

    [Y_H]实践原创 三台虚拟机:1台centOS , 2台ubuntu.   网上有用docker-machine创建虚拟机做的例子.   这里直接用VMware创建这三台虚拟机,然后用xshell连 ...

  8. sphinx的安装

    1.下载sphinx 没想到sphinx3解压后即可: wget http://sphinxsearch.com/files/sphinx-3.0.2-2592786-linux-amd64.tar. ...

  9. web服务器学习3---httpd 2.4.29日志处理

    .rotarelogs分割工具 如果有虚拟主机在虚拟主机配置文件中配置,否则在主配置文件中修改. 1.1修改配置文件 vi /usr/local/httpd/conf/conf.d/vhosts.co ...

  10. JavaScript(第十一天)【变量,作用域,内存】

    JavaScript的变量与其他语言的变量有很大区别.JavaScript变量是松散型的(不强制类型)本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据 ...