web前端面试入坑（1）

末蓝、 2022-06-06 09:26 131阅读 0赞

疑难点1.“3函数”——call、apply、bind

<script type="text/javascript">
    function xiaohong(){
       alert("小红");
    }
    
    function xiaoming(){
       return "小明";
    }
    
    //xiaohong();
    xiaohong.call(xiaoming)
    
    </script>

解析：上述函数中“xiaohong.call(xiaoming)”表示xiaohong()函数里的this对象，指向了xiaoming()里的对象，但是函数调用依旧是xiaohong()

call()用法：用在函数上边的

案例1：this对象不改变

<script type="text/javascript">
      var Dog = function(){
        this.name="汪星人";
        this.shout = function(){
               alert(this.name);
       }
    };
    
    var Cat = function(){
       this.name="喵星人";
    };
    
    var dog= new Dog();
    var cat=new Cat();
    dog.shout();      //"汪星人"
    //若想Cat含有shout方法，即可需要call()
    dog.shout().call(cat);  //dog.shout中的this对象，将指向cat对象
    </script>

案例2：写一个函数，this指向不同的对象

<script type="text/javascript">
     var xh={
      name:"小红",
      job:"JS工程师"
    };
    
    var xm={
      name:"小明",
      job:"资深前端开发工程师"
    };
    
    var jx={
      name:"杰西",
      job:"前端开发总监"
    };
    
    function myjob(){
      alert(this.name+"是一名"+this.job);
    }
    
    myjob.call(xh);   //将myjob中this指向xh
    myjob.call(xm);  //将myjob中this指向xm
    </script>

注意：若将上述案例中“call”改为“apply”，结果相同，但区别是什么呢？

将案例2进行修正，如下：

<script type="text/javascript">
     var xh={
      name:"小红",
      job:"JS工程师"
    };
    
    var xm={
      name:"小明",
      job:"资深前端开发工程师"
    };
    
    var jx={
      name:"杰西",
      job:"前端开发总监"
    };
    
    function myjob(gender,age,company){
      alert(this.name+gender+"今年"+age+"岁，在"+company+"担任"+this.job +"一职");
    }
    
    myjob.call(xh,'女',22,"腾讯");   
    myjob.call(xm,'男',23,"京东");   
    
     
    myjob.apply(xh,['女',22,"腾讯"]);
    myjob.apply(xm,['男',23,'京东']);
    </script>

call() VS apply()总结：

（1）在call()传入参数的时候，需要与函数所接受的参数——一一对应

（2）在apply()传入参数的时候，则必须以“数组”的方式传入，

数组中的元素，需要与函数所接受的参数——一一对应

案例3：bind()

<script type="text/javascipt">
     var info=["W3C","QQ","Sina","Sohu"];
     var it ={
      info:["前端开发网","腾讯","新浪","搜狐"],
     getInfo: function(){
       alert(this.info.join(","));
     }
    };
    
    //it.getInfo();
    
    var data=it.getInfo;
    data();   //this指向windows对象，"W3C,QQ,Sina,Sohu"
    
    //若需要弹出中文it中的内容，需要bind()函数
    var data1 = it.getInfo.bind(it);
    data();   //this指向it中的对象，即中文内容
     
    </script>

解析：若不加bind()时，会发现this指向的是windows下“info对象”，加了bind()函数时，绑定了it对象，此时this对象即为“it对象”。

案例3-1：将一个对象赋予另一个对象的方法，需要使用bind()

<script type="text/javascript">
    var jx={
     name:"杰西",
    gender:"男",
    age:24,
    say:function(){
      alert(this.name+","+this.gender+",j今年"+this.age);
    }
    };
    
    jx.say();   //杰西,男,今年24岁
    
    
    var xm=jx.say.bind({
    name:"小明",
    gender:"男",
    age:23
    });
    xm();     //小明,男,今年23岁
    </script>

案例3-2：bind()函数中可以传入参数吗？  可以！

<script type="text/javascript">
     var jx={
     name:"杰西",
     job:"前端工程师",
     say:function(gender,age,company){
       alert(this.name+","+gender+",今年"+age+"岁，在"+company+"担任"+this.job+"一职");
     }
    };
    
    var data=jx.say.bind(jx,"男",24,"百度");
    data();
    </script>

总结：call、apply、bind都是可以绑架“this”，逼迫this指向其他对象，

作用：改变this对象至想要指向对象。

疑难点2.this对象

this作用：全局作用域中的this指向的是“window对象”

案例1：

<script type="text/javascript">
    var test=function(){
      this.x=1;
      alert(this.x);
    };
    
    test();  //1
    
    function test2(){
      alert(this.x);  //1
    }
    
    var x=1;
    function test3(){
       this.x=100;
    }
    test3();    
    alert(x);   //100
    
    </script>

this“公理”：this关键字永远指向函数（方法）的所有者。

（1）函数被赋值于变量时“this”的问题

<script type="text/javascript">
    var info=["W3C","QQ","Sina"];
    var it={
    info:["W3C","腾讯","新浪"],
    getInfo:function(){
    alert(this.info.join(","));
    }
    };
    
    var data=it.getInfo;
    data();
    
    var data2=function(){
     alert(this.info.join(","));
    };
    data2();
    </script>

（2）当作为对象方法时this的问题

<script type="text/javascript">
    function test(){
     alert(this.x);
    }
    
    //var o={};
    //o.x=1;
    //o.t=test()
    //o.t();
    
    var o={
      x:1,
      t:function test(){
          alert(this.x);
      }
    }
    o.t();  //1
    
    </script>

（3）作为构造函数“this”的问题

<script type="text.javascript">
    function test(){
     this.x=1;
    }
    
    var o=new test();
    alert(o.x);  //1
    </script>

进行改造一下，如下：

<script type="text/javascript">
    var x=2;
    function test(){
    this.x=1;
    }
    
    var o=new test();
    alert(o.x);  //1
    alert(x);    //2
    </script>

（4）闭包中this的问题

<script type="text/javascript">
    var as={
     info:["W3C","腾讯","新浪"],
     getInfo:function(){
     console.log(this);
     console.log(this.info);
    
     /*
     function abc(){
      console.log(this);
      console.log(this.info);
     }    //window  "undefined"
     */
    
     var _this=this;
     function abc(){
      console.log(_this);
      console.log(_this.info);
     };
    
     abc();
     }
    }
    as.getInfo();
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，131人围观）

还没有评论，来说两句吧...

相关阅读

相关 web前端技术面试复习题1

展开 1 title : 前端技术（HTML、CSS、JS、JQuery等）前端技术在js中怎么样验证数字？通过正则表达式/\$/ reg.te

阳光穿透心脏的1/2处/ 2023年07月04日 11:16/ 0 赞/ 9 阅读

相关 web前端面试基础

1.简述XMLHttpRequest、JSONP的适用场景，并针对两种请求形式简述如何检测请求错误？ > 1. XMLHttpRequest 用于浏览器端与服务器端异步请求

蔚落/ 2022年11月30日 15:41/ 0 赞/ 236 阅读

相关 web前端工程师面试题

[web前端工程师面试题][web] [\[复制链接\]][web] <table> <tbody> <tr> <td> </td>

╰半夏微凉°/ 2022年09月18日 04:50/ 0 赞/ 295 阅读

相关直面坑爹的前端面试

参考：[http://www.zhufengpeixun.cn/JavaScriptmianshiti/2014-02-28/271.html][http_www.zhufe

╰+哭是因爲堅強的太久メ/ 2022年07月15日 23:56/ 0 赞/ 204 阅读

相关 web前端经典面试题

web前端面试题其他问题 1、请谈谈你对性能优化的认识？网页内容减少http请求次数 80%的响应时间花在下载网页内容(images, styleshee

爱被打了一巴掌/ 2022年07月12日 07:24/ 0 赞/ 4137 阅读

相关 web前端面试入坑（1）

疑难点1.“3函数”——call、apply、bind <script type="text/javascript"> function xiaohong()

末蓝、/ 2022年06月06日 09:26/ 0 赞/ 132 阅读

相关面试题——web前端面试总结

通过[近期面试][Link 1]（面试历程详见链接），对自己有一个更清晰的认识，现将遇到的面试题做出总结，希望可以给目前像我一样也正在找工作的你们一些建议吧，如下：

青旅半醒/ 2022年05月30日 10:28/ 0 赞/ 310 阅读

相关 Go Web开发入坑指南

在Go语言中开发Web应用，真的是一件非常简单的事情，因为Go语言标准库中就有非常成熟且简单的Web开发包：`net/http`。 net/http封装了开发Web应用所需要

淡淡的烟草味﹌/ 2022年01月20日 07:39/ 0 赞/ 351 阅读

相关 1-hadoop-入坑

大数据大数据是指无法在一定时间内用常规软件工具对其内容进行抓取、管理和处理的数据集合。大数据技术，是指从各种各样类型的数据中，快速获得有价值信息的能力。适用于大

川长思鸟来/ 2021年10月29日 10:50/ 0 赞/ 332 阅读

相关 Web前端面试技术点

一般来说会问如下几方面的问题：做过最满意的项目是什么？项目背景为什么要做这件事情？最终达到什么效果？你处于什么样的角色，起到了什么方面的作用？在项目中遇到什...

系统管理员/ 2021年03月29日 14:42/ 0 赞/ 542 阅读