• 刷题-js对象-改变上下文


    js中的对象平时用的很少,因为要学习ts和es6,发现对象里面的内容需要学习的东西真的很多,这里记录看书过程中与练习对象的一些方法,方便以后回看。

    遇到一个题目,在函数中有两个参数,第一个参数是一个函数,第二个函数是一个对象,考题的目的是让我学习在函数中如何改变this指向,之前一直知道apply call具体的场景很少遇到过(也可能自己写的业务还是太少,重复的业务做的太多了)。

    先看题目

     1 function alterContext(fn, obj) {
     2     
     3 }
     4 
     5 传入
     6 
     7 alterContext(function() {return this.greeting + ', ' + this.name + '!'; }, {name: 'Rebecca', greeting: 'Yo' })
     8 
     9 
    10 要求返回
    11 
    12 Rebecca Yo

    本人的解题思路,改变上下文肯定是作用域的问题,看了题目。又开始不确定了。

    意思是,我输入一个函数,里面的this.greetingthis.name要和后面输入的对象一一对应上。这样返回的结果才对。

    书上看的是:

    function Person(name, age) {
      this.name = name;
      this.age = age;
    }
    
    // 定义一个对象
    var You = new Person("You", 24); 
    
    console.log(You.name);
    //返回 You
    console.log(You.age);
    //返回 24

    看着两个参数

    fn:他是函数

    obj:对象

    fn的this如果能改变,指向对象里面的值就行了,

    于是我改变了写法

    function alterContext(fn, obj) {
    //在obj对象中新增一个函数 obj.fnc = fn;
    return obj.fnc() } alterContext(function() { return this.greeting + ', ' + this.name + '!'; },{name: 'Rebecca', greeting: 'Yo' }}) //返回 Rebecca,Yo 成功!

      完成之后,我忍不住看了别人的答案。。。。

    没错就是 apply和call使用他们!!!,他们的第二个参数可以不填,直接写null即可

    fn.apply(obj,null)

    fn.call(obj,null)

    bind() 函数会创建一个新函数(称为绑定函数),新函数与被调函数(绑定函数的目标函数)具有相同的函数体(在 ECMAScript 5 规范中内置的call属性)。当新函数被调用时 this 值绑定到 bind() 的第一个参数,该参数不能被重写。绑定函数被调用时,bind() 也接受预设的参数提供给原函数。一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。

    看的我一脸懵逼。

    我个人的理解是:用了这个函数,那么新函数与原来的函数的this指向都是相同的。如果你是new 操作符创建的对象,那么这个函数就是无效的。

    最终代码  return fn.bind(obj)

    发现返回了该函数,也就是说,没有执行。。。。

    修改后:return fn.bind(obj)()

    这样就可以了。

    总结:能看懂的也就这4中方法,还有好几种在原型上做操作的,不懂这一方面,也就不乱说了。

    相关链接:https://www.nowcoder.com/questionTerminal/dfcc28bf243642b795eaf5a2a621acc5

  • 相关阅读:
    [01] 异常的概念和处理
    [03] 节点流和处理流
    [02] 输入/输出流 和 字节/字符流
    [01] File类
    Apache的https协议配置
    Apache的虚拟主机配置
    Apahce的虚拟用户认证及server-status页
    Apache配置日志功能
    Apache脚本路径别名(CGI接口)
    Apache配置站点根目录、用户目录及页面访问属性
  • 原文地址:https://www.cnblogs.com/damai/p/8690710.html
Copyright © 2020-2023  润新知