zoukankan      html  css  js  c++  java
  • 彻底理解了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 女
  • 相关阅读:
    新浪微博评论抓取
    ubuntu下ssh登录特别慢的问题
    在ubuntu13.04上安装Mac主题
    ubuntu修复grub
    linux卸载自己编译安装的内核
    ubuntu下搭建sublime text2的java开发环境
    CentOS防火墙对特定端口允许
    python笔记:python的表达式
    python笔记一:python变量
    python笔记一:python初步
  • 原文地址:https://www.cnblogs.com/zhoulifeng/p/7519990.html
Copyright © 2011-2022 走看看