TypeScript + JavaScript：x上的函數不是嗎？

Question

我是TypeScript的新手，並且在AngularJS + TypeScript / JavaScript應用程序中遇到錯誤。

我提供的服務看起來像這樣：

module myApp {

    'use strict';

    export interface IActionItem {
        name: String;
        link?: String;
        icon: String;
        action?: any;
        className: String;
        order: Number;
    }

    export interface IActionItemsService {
        getActionItems() : IActionItem[];
    }

    class ActionItemsService implements IActionItemsService {

        private activeActionItemClass:String = 'active_menu_item';
        private actionItems:IActionItem[] = [
            {
                name: 'Search',
                icon: 'magnifier',
                action: this.search,
                className: 'visible',
                order: 2
            }
        ];

        constructor() {

        }

        private search(actionItem:IActionItem) {

            this.toggleActiveClass(actionItem);

        }

        private toggleActiveClass(actionItem:IActionItem) {
            // do some stuff with the actionItem className
        }

    }
}

...一個控制器，用於將一系列操作項設置為作用域。 只需一個簡單的HTML頁面即可處理點擊操作：

<div class="list_menu_options" ng-repeat="actionItem in vm.actionItems | orderBy:'order':true ">

    <a ng-class="actionItem.className"
            ng-click="actionItem.action(actionItem)">
        <span class="icon-{{actionItem.icon}}"></span>
        {{ actionItem.name }}
    </a>

</div>

一切似乎都按預期工作（並且TypeScript可以毫無錯誤地編譯為JavaScript），但是當我單擊搜索項時，我看到：

TypeError: this.toggleActiveClass is not a function
at Object.ActionItemsService.search [as action]

我確信由於對TypeScript的了解不足，我在某些地方濫用了某些東西，但是我似乎找不到它。 有什么建議么？

Answer 1

原因是因為action功能是對象（文字）的一部分，而不是實現對其action屬性的引用的實際類的實例， search @

      private actionItems:IActionItem[] = [{
            name: 'Search',
            icon: 'magnifier',
            action: this.search, //<-- this one
            className: 'visible',
            order: 2
        }
    ];

因此，當您通過actioItem.action(..)調用函數時，函數執行的上下文（ this ）將是該對象的文字，而不是包含toggleActiveClass的類的預期實例。

您可以通過執行以下action: this.search.bind(this),將分配給action屬性的函數引用綁定 （或也可以使用angular.bind ）為實際的ActionItemsService實例action: this.search.bind(this),

即

   {
        name: 'Search',
        icon: 'magnifier',
        action: this.search.bind(this), //<-- this one
        className: 'visible',
        order: 2
    }

或者，您也可以使用箭頭運算符進行詞匯上下文解析，即

   action: (itm:IActionItem)=> this.search(itm:IActionItem),

Answer 2

如果您重寫toggleActiveClass並將其search為lambda，會發生什么？ 根據這些方法的調用方式， this可能指向錯誤的地方。 使用Lambda將迫使this將詞法范圍-這意味着它永遠指向類，而不是它取決於功能實際是如何調用。

    private search = (actionItem:IActionItem) => {
        this.toggleActiveClass(actionItem);
    }

    private toggleActiveClass = (actionItem:IActionItem) => {
        // do some stuff with the actionItem className
    }