如何插入新功能而不在JS中添加自我对象

Question

我有以下JS代码，如何在不添加自我对象的情况下插入新功能？

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("某物"(。newfunc((

这就是我尝试的，如果您知道另一种方式，请分享，谢谢。

Answer 1

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

1. 您从构造函数

返回 self 对象

2. 您使用箭头函数不会更改的值此。箭头功能很酷，但是它们与常规函数无法互换(至少在每种情况下都不是构造函数函数，就是这样的情况(

查看下面的两个构造函数函数(select1是基于您的代码，select2基于"如何做"(：

https://developer.mozilla.org/en-us/docs/web/javascript/reference/reference/operators/new

https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/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