• (三十七)js改变this指向的方法


    最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧。

    1.改变函数内部的this指向的三种方法:call(),apply(),bind()

    2. 相同点:都可以改变this指向。

    都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域。
    一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向。
    call()方法使用示例:
    语法: 函数.call(this, arg1, arg2, arg3, arg4)
    第一个参数用来指定函数内部的this指向,后面的参数是函数执行时所需的实参。
    //例1
    <script>
    window.color = 'red';
    document.color = 'yellow';
     
    var s1 = {color: 'blue' };
    function changeColor(){
    console.log(this.color);
    }
     
    changeColor.call(); //red (默认传递参数)
    changeColor.call(window); //red
    changeColor.call(document); //yellow
    changeColor.call(this); //red
    changeColor.call(s1); //blue
     
    </script>
     
    //例2
    var Pet = {
    words : '...',
    speak : function (say) {
    console.log(say + ''+ this.words)
    }
    }
    Pet.speak('Speak'); // 结果:Speak...
     
    var Dog = {
    words:'Wang'
    }
     
    //将this的指向改变成了Dog
    Pet.speak.call(Dog, 'Speak'); //结果: SpeakWang
     
    apply()方法使用示例:
    语法: 函数.apply(this, []);
    第一个参数用来指定函数内部的this指向;
    第二个参数要求是一个数组或者伪数组,apply会把它平铺然后传入对应的函数中.
    可以平铺数据;
    //例1
    <script>
    window.number = 'one';
    document.number = 'two';
     
    var s1 = {number: 'three' };
    function changeColor(){
    console.log(this.number);
    }
     
    changeColor.apply(); //one (默认传参)
    changeColor.apply(window); //one
    changeColor.apply(document); //two
    changeColor.apply(this); //one
    changeColor.apply(s1); //three
     
    </script>
     
    //例2
    function Pet(words){
    this.words = words;
    this.speak = function () {
    console.log( this.words)
    }
    }
    function Dog(words){
    //Pet.call(this, words); //结果: Wang
    Pet.apply(this, arguments); //结果: Wang
    }
    var dog = new Dog('Wang');
    dog.speak();

    bind()方法使用示例:

    语法: 函数.bind(this);
    该方法返回一个函数,是一个新的函数,
     
    this.name="jack";
    var demo={
    name:"rose",
    getName:function(){return this.name;}
    }
     
    console.log(demo.getName());//输出rose  这里的this指向demo
     
    var another=demo.getName;
    console.log(another())//输出jack  这里的this指向全局对象
      
    //运用bind方法更改this指向
    var another2=another.bind(demo);
    console.log(another2());//输出rose  这里this指向了demo对象了;

    3. 不同点:接收参数的方式不同。

    apply()方法 接收两个参数,一个是函数运行的作用域(this),另一个是参数数组。
    语法:apply([thisObj [,argArray] ]);,调用一个对象的一个方法,2另一个对象替换当前对象。
    说明:如果argArray不是一个有效数组或不是arguments对象,那么将导致一个 
    TypeError,如果没有提供argArray和thisObj任何一个参数,那么Global对象将用作thisObj。
    call()方法 第一个参数和apply()方法的一样,但是传递给函数的参数必须列举出来。
    语法:call([thisObject[,arg1 [,arg2 [,...,argn]]]]);,应用某一对象的一个方法,用另一个对象替换当前对象。
    说明: call方法可以用来代替另一个对象调用一个方法,call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象,如果没有提供thisObj参数,那么Global对象被用于thisObj。
    注:不同之处是call和apply是一次性改变this,bind是永久性改变this,可以认为bind的灵活性更高,你可以先把this绑定好, 然后什么时候想执行就什么时候执行。
    使用示例1:
    function add(c,d){
    return this.a + this.b + c + d;
    }
    var s = {a:1, b:2};
    console.log(add.call(s,3,4)); // 1+2+3+4 = 10
    console.log(add.apply(s,[5,6])); // 1+2+5+6 = 14
     
    使用示例2:
    <script>
    window.firstName = "Cynthia";
    window.lastName = "_xie";
    var myObject = {firstName:'my', lastName:'Object'};
    function getName(){
    console.log(this.firstName + this.lastName);
    }
    function getMessage(sex,age){
    console.log(this.firstName + this.lastName + " 性别: " + sex + " age: " + age );
    }
    getName.call(window); // Cynthia_xie
    getName.call(myObject); // myObject
     
    getName.apply(window); // Cynthia_xie
    getName.apply(myObject);// myObject
     
    getMessage.call(window,"女",21); //Cynthia_xie 性别: 女 age: 21
    getMessage.apply(window,["女",21]); // Cynthia_xie 性别: 女 age: 21
     
    getMessage.call(myObject,"未知",22); //myObject 性别: 未知 age: 22
    getMessage.apply(myObject,["未知",22]); // myObject 性别: 未知 age: 22
     
    </script>
    

      

     
  • 相关阅读:
    Tips on Hair and Final gathering
    数学公式和符号的念法
    How to use Intel C++ Compiler in Visual Studio 2008
    Number Prefixes in Mathematics
    Glossy reflections/refractions in large scene
    atomic flushing data
    elvish Template Library Plan
    [Maxim07]中光线与三角形求交算法的推导
    C# 关闭窗体立即停止进程
    MS SQL 索引设计的准则
  • 原文地址:https://www.cnblogs.com/bgwhite/p/9405847.html
Copyright © 2020-2023  润新知