JavaScript Object Literal -如何将`this`关键字替换为其他关键字

i34xakig  于 2023-08-02  发布在  Java
关注(0)|答案(3)|浏览(148)

有什么方法可以避免经常使用this关键字来访问当前对象的属性和方法吗?
我尝试了类似于Example 2的东西,但它根本不起作用。

示例1:

<script>

  var fruits = {

    printApple(){ return "Apple"; },

    printBanana(){ return "Banana"; },

    printPear(){ return "Pear"; },

    printAll(){ return "All Fruits: " + this.printApple() + ", " + this.printBanana() + ", " + this.printPear(); }

  }

  alert(fruits.printAll());

</script>

字符串

示例二:

  • (此脚本不起作用,请不要使用它)*
<script>

  var fruits = {

    y(){ return this.fruits; },

    printApple(){ return "Apple"; },

    printBanana(){ return "Banana"; },

    printPear(){ return "Pear"; },

    printAll(){ return "All Fruits: " + y.printApple() + ", " + y.printBanana() + ", " + y.printPear(); }

  }

  alert(fruits.printAll());

</script>

wnvonmuf

wnvonmuf1#

由于OP的一些评论已经描绘了OP的真实的困境/问题...

唯一可以解决这个问题的方法是从this上下文中本地访问方法,并将bound version重新分配给每个局部变量。
我的上述评论已经指向这个方向……
@Edgaras ...在这种情况下,OP可以写……*

  • let { elm, Element_Create, Element_Declare /* ... */ } = this;*
  • ...对于this的每个方法,然后重新绑定它,就像... *
  • elm = elm.bind(this); Element_Create = Element_Create.bind(this); /* ... */*
  • ...以便只使用/调用方法名称,但每个方法都在其正确的上下文中。

使用OP提供的已经简化的代码示例,后者应该重写为…

var fruits = {

  apple: 'Apple',
  pear: 'Pear',
  banana: 'Banana',

  getApple() { return this.apple; },
  getPear() { return this.pear; },
  getBanana() { return this.banana; },

  printAll() {
    // access and assign every needed method from the `this` context.
    let { getApple, getPear, getBanana } = this;

    // reassign each method by its own bound variant each rebinding `this`.
    [getApple, getPear, getBanana] = [getApple, getPear, getBanana]
      .map(getter => getter.bind(this));

    // invoke the rebound method names without the connecting dot operator.
    return `All Fruits: ${ getApple() }, ${ getPear() }, ${ getBanana() }`;
  },
};

console.log(
  fruits.printAll()
);

个字符

1tuwyuhd

1tuwyuhd2#

看起来最惯用和最简单的方法是使用函数构造函数(硬对象)。实际上,我更喜欢它而不是原型,它对mixin设计模式非常好。
关于你的问题-没有很好的对象字面量替代方案存在,但你可以使用匿名构造函数:

const obj = new function(){
  // your constructor here
};

字符串
还测试了数千个对象对原型和性能的差异是可以忽略不计的大多数情况下。
另一个好处是,您不再关心正确的this绑定,并且可以安全地传递方法引用,因为this绑定发生在构造函数中。

function Fruits(){

  // add public methods here, use `self` anywhere as a safe alternative for `this`
  const self = Object.assign(this, { printAll, alertMe });

  function printApple() {
    return "Apple";
  }

  function printBanana() {
    return "Banana";
  }

  function printPear() {
    return "Pear";
  }

  function printAll() {
    return "All Fruits: " + printApple() + ", " + printBanana() + ", " + printPear();
  }
  
  function alertMe() {

    // use `self` if you allow to override the method in a mixin

    alert(self.printAll());

  }
}

function MixedFruits() {

  // call Fruits as a constructor on the current `this`

  Fruits.call(this);
  Object.assign(this, { printAll });

  function printAll(){
    return 'printAll() has been overridden!!!';
  }

}

const fruits = new Fruits;

console.log(fruits.printAll());

const mixedFruits = new MixedFruits;

// we don't care about `this` when passing methods as arguments
$base.addEventListener('click', fruits.alertMe);
$overridden.addEventListener('click', mixedFruits.alertMe);
<button id="$base">Fruits::alertMe()</button>
<br/>
<br/>
<button id="$overridden">MixedFruits::alertMe()</button>

的数据

kmpatx3s

kmpatx3s3#

像许多语言一样,this的使用是不可避免的。特别是当你需要访问同一个对象的属性或方法时。
this关键字是每个执行上下文获取的特殊变量,由JS引擎自动设置。
您的示例2 -脚本不工作,因为y没有在全局上下文中定义。

var fruits = {
    
        printApple(){ return "Apple"; },
    
        printBanana(){ return "Banana"; },
    
        printPear(){ return "Pear"; },
    
        printAll(){
          var self = this;
          return "All Fruits: " + self.printApple() + ", " + self.printBanana() + ", " + self.printPear(); 
        }
      }
    
      alert(fruits.printAll());

字符串

相关问题