在 Javascript 中克隆/复制方法？答案

【问题标题】：Clone/Copy a Method in Javascript?在 Javascript 中克隆/复制方法？
【发布时间】：2019-11-27 14:11:11
【问题描述】：

如何克隆或复制一种方法，从而不保留对原始方法的引用？

我正在尝试使用 DOM 复制元素上的单击函数并将其分配给另一个元素，这样我就可以从 DOM 中删除第一个元素而不会丢失另一个元素上的函数引用。我在指令中这样做。

element.click = parent.click //need a better way to copy
element.click() //works
remove(parent)
element.click() //doesn't work

我这样做的原因是因为我删除了 parent-wrapper 标记，该标记分配了一个 (click) 方法，因此只保留了它的内部按钮模板。但是，因为我要删除包装标签，所以父标签上的（点击）不会被传递给模板按钮标签。

例如，我有一个 app-button 组件，其模板中有一个按钮。

目前是这样渲染的：

<app-button (click) = function(1, 2)>
  <button>
  </button>
</app-button>

我希望删除父标签，我正在通过 DOM 操作执行此操作，但希望保留（单击）功能，例如：

<button (click) = function(1, 2)>
</button>

【问题讨论】：

看看this post。 One answer 建议使用element.click = parent.click.bind(element)。
不幸的是，这不起作用。我已经尝试了其他一些方法，但没有运气——我认为这些帖子已经很老了。
@ACarr 你能展示更多你的代码吗？我认为您可能会以错误的方式实现您想要实现的目标。
@Taurayi 更新了！
@ACarr “我这样做的原因是因为我删除了父包装标签，该标签分配了一个（点击）方法，因此只保留了它的内部按钮模板”但是为什么？我只是问，因为我想知道为什么你首先需要<app-button>，而你可以用指令来做<button app-button (click)="onClick()">。

标签： javascript angular typescript

【解决方案1】：

我不太确定我理解你为什么要尝试做你正在做的事情（或者它到底是什么），但据我了解，你可以在组件类中存储对宿主元素 '' 的引用，然后您可以为模板中的<button> 元素分配一个侦听器，以触发该引用上的点击事件：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component, ViewChild, ElementRef, Renderer2, OnInit} from '@angular/core';


@Component({
  selector: 'app-root',
  template: `
    <app-button (click)="foo()"></app-button>
  `
})
export class AppComponent {

    foo() {

        console.log('bar');

    }// end function

}// end class


@Component({
  selector: 'app-button',
  template: `<button #button (click)="onClick()">Click me</button>`
})
export class AppButtonComponent implements OnInit {

    @ViewChild('button')
    private button:ElementRef;

    constructor(
        private element:ElementRef, 
        private renderer:Renderer2
    ) {}

    ngOnInit() {


        let parent = this.element.nativeElement.parentElement,
            element = this.element.nativeElement,
            button = this.button.nativeElement;

        this.renderer.insertBefore(parent, button, element );
        this.renderer.removeChild(parent, element);

    }// end function

    onClick() {

        let element = this.element.nativeElement;

        element.click();

    }// end function

}// end class

【讨论】：