使用函数的上下文与将参数传递给函数

时间:2016-11-14 03:55:22

标签: javascript

我想知道如何通过传递上下文在函数中使用this关键字比将参数传递给函数更好。

例如:

var dog = {
    name: 'puppy'
};

function foo(obj) {
    console.log(obj.name);
}

foo(dog); // puppy

我意识到我在代码中一直遵循上面的模式方式。虽然我没有达到其局限性显而易见的那个阶段。我想知道如何使用this更优雅。也就是说,改为使用以下模式:

function foo(){
    console.log(this.name);
}

foo.call(dog); //puppy

2 个答案:

答案 0 :(得分:1)

这实际上取决于功能的用途以及您要完成的功能。

但坦率地说,在您的简单示例中使用上下文的最佳用例是将函数添加到dog对象,这样就可以避免必须设置每次上下文。



var dog = {
  name: 'puppy',
  printName: function() {
    console.log(this.name);
  }
};

dog.printName();




或者从dog对象创建一个类。



var Dog = function(name) {
  this._name = name;
};

Dog.prototype = {
  constructor: Dog,
  getName: function() {
    return this._name
  },
  printToConsole: function() {
    console.log("Dog named", this.getName());
  }
};

var myDog = new Dog("puppy");

myDog.printToConsole();




如果函数foo将成为一个自由函数,那么每次都必须设置上下文是没有意义的。传递参数是可行的方法。

在处理恰好是来自其他对象的方法的回调时,使用.call.apply.bind是有意义的。

此外,foo.call(dog);foo(dog)仅在对象具有名为name的属性时才有用,限制其对dog对象的使用。

它可以直接收到name

function foo(name) {
    console.log(name);
}
foo(dog.name);

答案 1 :(得分:1)

  

我想知道如何通过传递上下文在函数中使用此关键字比将参数传递给函数更好。

这是一个非常广泛的问题

简短且同样广泛的答案是,使用this.property可以构建一个使用函数 callsite 对象值的函数。

为什么这么聪明?因为您可以让它一次又一次地执行相同的工作,而无需手动 传递反映您使用该函数的不同上下文的参数。

您可以使用.call.apply.bind手动设置this的上下文。当你不能依赖函数的调用点时,这很有用,并且本质上允许你通过设置上下文来传递“无限”数量的参数。