javascript - 如何插入新函数而不在JS中的self对象中添加

Question

我有以下 JS 代码，如何在不添加 self 对象的情况下插入新函数？

Function select(selector){
Var self = {
Print: ()=>{},
Delete: ()=>{}
};
Return self;
}

//我想在这里添加新函数，这样我就可以使用 select("something").newFunc() 来调用它

有没有办法做到这一点？我尝试了以下方法，但我想知道是否有另一种方法可以做到这一点。

经过几个小时的测试，我尝试将变量原型的方法（A）中的所有方法赋值，然后将A的原型设置回变量的原型。然后我可以使用变量调用它。

var myScript = function(selector){
return new myScript.prototype.init(selector);
}
var init = myScript.prototype.init = function(selector){
var self = {
//codes
};
return self;
}
init.prototype = myScript.prototype;
(function(mS){
mS.prototype.newFunc = function(){
return "Coding is Fun";
}
})(myScript);

之后，我可以使用 myScript("something").newFunc()

这就是我试过的方法，如果你知道另一种方法，请分享，谢谢。

标签： javascript

Answer 1

构造函数不需要您设计的“自我”对象。在你的情况下

1. 您从构造函数返回self对象

2. 您使用的箭头函数不会改变this的值。箭头函数很酷，但它们不能与常规函数互换（至少不是在每种情况下 - 在构造函数内部就是这种情况）

看下面的两个构造函数（Select1是基于你的代码，Select2是基于一个“怎么做”）：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

// adding a self object - arrow functions
function Select1(selector) {
  this.selector = selector
  var self = {
    print: () => {
      return 'Select1 print: ' + this.selector
    },
    delete: () => {
      return 'Select1 delete: ' + this.selector
    }
  }
  return self
}

// no self object - regular functions
function Select2(selector) {
  this.selector = selector
  this.print = function() {
    return 'Select2 print: ' + this.selector
  }
  this.delete = function() {
    return 'Select2 delete: ' + this.selector
  }
  return this
}

// instantiating the two different Objects
let select1 = new Select1('selector1')
let select2 = new Select2('selector2')

// calling the print method on both Objects
console.log(select1.print())
console.log(select2.print())

// logging both objects
console.log(select1)
console.log(select2)

// modifying the prototype of the constructor functions
// modifying Select1.self's prototype would throw an error
/*Select1.prototype.self.newFunc = () => {
  return 'Select1 newFunc: ' + this.selector
}*/
Select1.prototype.newFunc = function() {
  return 'Select1 newFunc: ' + this.selector
}
Select2.prototype.newFunc = function() {
  return 'Select2 newFunc: ' + this.selector
}

// logging the new function

// logging select1.newFunc() would throw an error, as you return 'self', that's not modified
// console.log(select1.newFunc())
console.log(select2.newFunc())

// logging the modified object
console.log(select1)
console.log(select2)

但

• 您应该使用正确的缩进 - 这样代码更具可读性

• 您应该遵循命名和大小写约定，以便其他人可以快速查看您的代码中的内容（构造函数以大写字母开头，但其他保留字不（因此大小写也很重要）

用法

如果你想像 一样使用它myScript('selector').myFunc()，那么你需要将它包装在另一个函数中（就像你在第二个代码示例中所做的那样）：

function Select2(selector) {
  this.selector = selector
  this.print = function() {
    return 'Select2 print: ' + this.selector
  }
  this.delete = function() {
    return 'Select2 delete: ' + this.selector
  }
  return this
}

function myFunc(selector) {
  return new Select2(selector)
}

console.log(myFunc('s1').print())
console.log(myFunc('s2').print())

如果您希望能够设置选择器，那么您需要一个set()函数：

function Select2(selector) {
  this.selector = selector
  this.print = function() {
    return 'Select2 print: ' + this.selector
  }
  this.delete = function() {
    return 'Select2 delete: ' + this.selector
  }
  // this.setSelector is the set() function
  this.setSelector = function(s) {
    this.selector = s
  }
  return this
}

function myFunc(selector) {
  return new Select2(selector)
}

// instantiating Select2
const selector2 = myFunc('s1')

console.log(selector2.print()) // expected: s1

// setting the 'selector' of the instantiated
// Select2 Object to a new value
selector2.setSelector('s2')
console.log(selector2.print()) // expected: s2