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.greeting和this.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