Question

任何人都可以解释为什么第一件事有效而第二件事没有？

function MyObj(val) {
    this.value = val;

    this.myFunc = function(selector) {
        $(selector).html("test: " + this.value);
    }
}

foo = new MyObj("tester");
foo.myFunc("#one"); //This works

func = foo.myFunc;
func("#two"); //This doesnt

如何？我怎样才能使它发挥作用？

JSFIDDLE

Answer 1

JavaScript中的函数this并不固定;当你打电话

something.somefunc()
// or something['somefunc']()

this绑定到something。当您调用没有对象的函数时，this将绑定到undefined（在严格模式下）或全局对象。

你可以通过保持变量来保持正确的this：

来解决这个问题

function MyObj(val) {
    var obj = this;

    this.value = val;

    this.myFunc = function(selector) {
        $(selector).html("test: " + obj.value);
    };
}

ECMAScript 5在Function.prototype上提供了一种专门处理此问题的方法（通常也应将myFunc放在MyObj.prototype上：

var func = foo.myFunc.bind(foo);
func("#two"); // Works now

Answer 2

使用bind()将this的值分配给函数：

function MyObj(val) {
    this.value = val;

    this.myFunc = function(selector) {
        console.log(this); // <--- look your console output
        $(selector).html("test: "+this.value);
    }
}

foo = new MyObj("tester");
foo.myFunc("#one");

func = foo.myFunc;
func.bind(foo)("#two"); //  <---- here

或：

func = foo.myFunc.bind(foo);
func("#two");

DEMO：http://jsfiddle.net/M8Qym/1/

JS无法从不同的函数访问对象值

2 个答案: