const声明的独立函数无法打印对象name属性,求解决方案
问题核心根源
你遇到的打印失效问题本质是this指向规则不匹配:printName函数内部依赖this.name取值,但你之前尝试的两种调用方式都没有让this正确指向对应的person对象。
你之前试的两种调用为什么不生效
- 调用
person1.printName():你从来没有把printName作为方法挂载到person1、person2的对象属性上,对象本身根本不存在这个方法,执行时会直接抛出TypeError: person1.printName is not a function报错,根本走不到打印逻辑。 - 调用全局的
printName(person1):JS的函数this指向不会自动匹配你传的第一个实参,这种全局直接调用的场景下,非严格模式的this会指向全局对象,严格模式下this直接是undefined;再加上市面上的JS环境里用const/let定义的顶层变量不会挂载到全局对象上,哪怕this指向全局,也读不到对应person对象里的name属性,最终打印结果就是undefined。
可用的修复方案
根据你的使用场景选对应的写法就行:
- 不想改动原有独立定义的
printName函数、也不想把方法挂到对象上的话,用JS提供的内置方法手动绑定this指向:- 临时单次调用:用
call触发,比如printName.call(person1)就会稳定输出'Aaron Towels',换person2当参数就输出Tom Clancy的名字。 - 需要长期复用绑定结果:用
bind生成固定绑定了某个对象的新函数,比如const printAaron = printName.bind(person1),之后不管在什么场景下直接调printAaron(),都能正常输出Aaron的名字,不会因为调用上下文变化丢失指向。
- 临时单次调用:用
- 就是想用
person1.printName()这种对象方法的调用形式,两种方式实现:- 定义对象的时候直接把方法写进对象结构:
这种写法下,作为对象属性的方法被调用时,JS会自动把const person1 = { name: 'Aaron Towels', printName: function() { console.log(this.name) } }this指向调用方法的对象本身,直接执行person1.printName()就能正常出结果。- 不想改动原有对象定义结构的话,手动把
printName挂到对象上就行:person1.printName = printName,挂载之后再执行person1.printName(),效果和上面的写法完全一致。
小提示:如果之后你把对象上挂好的方法单独取出来当独立变量调用,比如
const logMyName = person1.printName之后直接执行logMyName(),this又会变回全局对象/undefined,这是因为脱离了对象属性的调用场景,方法的自动this绑定就失效了,需要手动用bind固定指向才不会出问题。
内容的提问来源于stack exchange,提问作者squall
相关产品推荐
相关产品推荐

