zoukankan      html  css  js  c++  java
  • JavaScript设计模式基础之this、call、apply

    1.this的指向

    除去不常用的with和eval,具体应用中this指向大概能分为4种情况分别是

      1.作为对象的方法调用。

      2.作为普通函数的方法调用。

      3.Function.prototype.call或Function.prototype.appy

    1.如果作为对象方法的调用,this是指向该对象:

     let obj = {
                objName:'obj',
                objThis(){
                    alert(this.objName);
                }
            }    
            obj.objThis();

    输出如下:

    对象obj里面的方法objThis的this是指向该对象

    2.作为普通函数调用,this指向全局对象也就是window对象

    var objName = 'window';
            //  let obj = {
            //     objName:'obj',
            //     objThis(){
            //         alert(this.objName);
            //     }
            // }    
            function objThis(){
                alert(this.objName);
            }
            objThis();

    输出:

    函数里面的this默认指向全局window

    3.构造器调用(es6类调用),this指向实例化对象

    class Obj{
                constructor(str,nub){
                    this.str = str;
                    this.nub = nub;
                }
                num(){
                    console.log(this.str,this.nub,this)
                }
            }
            //类实例
            let obj = new Obj('hello',123);
            obj.num();

    输出:

    this输出的是类的实例对象 构造函数或者类中this指向自身实例

    总结:在谁里面使用this,this指向谁

    2.call和apply

    1.区别

      appy接收2个参数,第一个参数指定函数体内this对象的指向,第二个参数为一个带下标的集合,这个集合可以为数组,也可以为类数组,appy方法吧这个集合中的原生

      作为参数传递给呗调用的函数。

      call传入的参数数量不固定第一个参数和apply相同,后面的每个参数依次传入只是不是以集合的方式而是参数的方式

         //apply
            let apply1 = function(){
                alert(arguments)//输出[1,2,3]
            }
            apply1.apply(null,[1,2,3])
            //call
            let call1 = function(){
                alert(arguments)//输出[1,2,3]
            }
            call1.call(null,1,2,3)

    call是包装在apply上面的语法糖,如果我们传入的第一个参数是null,那么函数体内的this会默认指向宿主对象,在浏览器中就是全局window 

    call和apply能改变this指向和借用其他对象的方法 这里就不一一阐述了 网上特别多 

    为后面的设计模式做基础 是必须会的

  • 相关阅读:
    使用Python将excel文件中的数据提取到txt中
    多项式加法的链表实现
    hdu 5976 Detachment 逆元的应用
    JavaScript 全局函数
    JavaScript 事件句柄
    JavaScript 运算符
    纯Javascript 实现的日历 ,在IE所有版本浏览器上测试通过,火狐、谷歌、360、QQ等浏览器均兼容,理论上均兼容所有浏览器
    HTML ASCII 代码
    JavaScript 浏览器版本判定
    Delphi WebBrowser内核版本修改
  • 原文地址:https://www.cnblogs.com/y-y-y-y/p/9655706.html
Copyright © 2011-2022 走看看