代码之家 › 专栏 › 技术社区 › Peter

javascript函数get object

methods object javascript

Peter · 技术社区 · 6 年前

函数是否有方法在函数名之前获取对象值?下面是我想要达到的目标的一个例子。我希望能够读取函数中的myElement变量,但不能将其作为参数传递,而是在带有点的函数之前传递它。

任何简单的例子或解释都会很有帮助。

var myElement = document.getElementById('myID');

myElement.myFunction();

function myFunction() {
     alert(myElement);
}

2 回复 | 直到 6 年前

baao 6 年前

你唯一能做的就是 myFunction 到 HTMLElement s原型(这是 document.getElementById() . That's usually frowned upon ,但如果这是你自己的项目,你知道你在做什么,你就可以这么做。

var myElement = document.getElementById('myID');

HTMLElement.prototype.myFunction = function() {
  console.log(this);
}

myElement.myFunction();

<div id="myID"></div>

有了这个原型,你可以打电话给 肌力函数 在代码中的每个htmlElement上。

关于您的最后一条评论,函数可以是

HTMLElement.prototype.myFunction = function() {
  alert(this.id);
}

我不明白你为什么要这样做,因为这样做更容易

alert(myElement.id);

关于这些评论,下面是我要做的。与其扩展任何东西,不如创建自己的类(或函数),该类采用htmlElement。现在在这个类中,您可以添加任何想要的方法,操作元素,然后从getter返回纯htmlElement。显然你可以把它改成你想要的任何回报。

class MyHtmlElement {
  constructor(htmlElement) {
    this._htmlElement = htmlElement;
  }

  alertId() {
    alert(this._htmlElement.id);
    // optional
    return this;
  }

  logId() {
    console.log(this._htmlElement.id);
    // optional
    return this;
  }
  
  setId(newId) {
    this.htmlElement.id = newId;
    // optional
    return this;
  }

  setStyle(prop, val) {
    this._htmlElement.style[prop] = val;
    // optional
    return this;
  }

  get htmlElement() {
    return this._htmlElement;
  }

  set htmlElement(value) {
    this._htmlElement = value;
  }
}

const el = new MyHtmlElement(document.getElementById('foo'));

el
  .setId('bar')
  .logId()
  .alertId()
  .setStyle('background-color', 'red')
  .setStyle('width', '100vw')
  .setStyle('height', '100vh');
  
// If you need the plain element, return it

const plainHTMLElement = el.htmlElement;
console.log(plainHTMLElement);

<div id="foo"></div>

Domino 6 年前

当函数存储在对象中,然后用 theObject.theFunction() ,的值 this 在函数中 theObject .

function sayHello() {
  alert('Hello, my name is ' + this.name);
}

let myObject = { name: 'Bob', speak: sayHello };
myObject.speak(); // shows the message 'Hello, my name is Bob'

现在,如果您想创建自己的函数并让它被元素使用,您要么需要首先将函数存储在元素实例中,要么将其添加到元素原型中,这两种方法我都强烈反对。如果你觉得你必须这样做,你的设计有缺陷。

不过,如果您有充分的理由向现有对象添加自定义方法,我建议您在javascript中查找有关原型继承的经验教训,或者阅读 my old answer 如果你不确定它是怎么工作的。可以说,创建一个函数,在调用对象时向其添加方法,如下所示:

function addMethods(elem) {
  elem.speak = sayHello;
}

let myElement = document.getElementById('myID');
addMethods(myElement);

myElement.speak(); // Hello, my name is <value of the element's name attribute>

或者可以将该方法添加到所有元素的原型中:

Element.prototype.speak = sayHello;
let myElement = document.getElementById('myID');
myElement.speak();

虽然浏览器从很久以前就允许人们这样做了,但从技术上讲,并不能保证元素是公开可用的,或者它的原型是可修改的,或者您可以向元素实例添加方法。原型框架(一个不方便命名的第三方库)已经使用这些技术很长一段时间了,但是它确实导致了一些问题。jquery倾向于使用不同的方法,将元素包装到另一个对象中,在该对象上放置自定义方法。