替代'self=这个'带有javascript中的对象

Alternative to 'self = this' with object in javascript

本文关键字:对象 javascript self 替代 这个 带有      更新时间:2023-09-26

我有这个代码:

function Person(name){      
    var self = this;
    this.name = name;
    function hello(){
        alert("hello " + self.name);
    }
    return {
        hello: hello
    };
}
var newPerson = new Person("john");
newPerson.hello();

我希望能够使用"this"关键字访问"hello"函数中的"name"属性;我想要一个替代使用"self"变量的方法。

除了使用jquery的$.proxy函数来控制上下文之外,我如何在没有变量"self"的情况下编写相同的代码?

我想要一个如下所示的代码,但当我调用"newPerson.hello()"时,"name"总是"undefined"。我不知道为什么,因为我一直认为函数的作用域总是调用方圆点左侧的对象,在这种情况下,在创建对象时,"newPerson"被赋予了值"john"。

function Person(name){              
    this.name = name;
    function hello(){
        alert("hello " + this.name);
    }
    return {
        hello: hello
    };
}
var newPerson = new Person("john");
newPerson.hello();

谢谢。

您可以使用.bind强制函数的所有者为您传递的任何对象。因此,您可以这样编写Person对象:

function Person(name){ 
    this.name = name;
    var hello = function(){
        alert("hello " + this.name);
    }.bind(this);
    return {
        hello: hello
    };
}

这将确保.hello始终在调用它的Person的上下文中执行

这里有一个演示:

--jsFiddle DEMO-

使用new关键字时,默认情况下不使用return,函数将返回this您将需要更改函数的声明方式。

这是一把小提琴

http://jsfiddle.net/SaintGerbil/9SAhD/

function Person(name){              
    this.name = name;
    this.hello = function (){
        alert("hello " + this.name);
    }
}
var newPerson = new Person("john");
newPerson.hello();​

编辑如果您要求名称是私有的,那么这里有一个替代

function Person(name){              
    var _name = name;
    this.hello = function (){
        alert("hello " + _name);
    }
}
var newPerson = new Person("john");
newPerson.hello();​

在回答您的问题时,有4种方法可以调用函数这些影响this的值,它们是

  • 构造函数调用(使用new关键字),其中this是自动返回的新对象
  • 方法调用如果一个函数被附加到一个对象并从中调用,那么this就是从中调用的对象
  • 函数调用对函数的直接调用将导致this成为全局对象,(当调用没有new的contstructor时,这是一个常见的错误)
  • 当使用一个方法来指定应该是什么时,Apply''Call调用(例如,请参阅jackdrowers)

进一步编辑

因此,从一开始就使用您想要的代码,并解释正在发生的事情。

function Person(name){
    this.name = name; // 1
    function hello(){ // 2
        alert("hello " + this.name); // 3
    } 
    return {
        hello: hello
    }; //4
}

人作为函数可以通过两种方式调用

var x = Person("ted");

var x = new Person("jimmy");

由于您已经用大写字母命名了Person,这意味着您希望人们使用new
因此,坚持这一点,我们输入函数,javascript创建一个新对象并将其分配给this

  • 在第1行中,我们将一个"name"变量附加到this,并使用传递的参数进行初始化
  • 在第2行中,我们将一个"hello"函数附加到this
  • 第3行函数希望有一个"name"变量存在于此(目前是这样)
  • 第4行我们现在声明一个新对象并将函数附加到它,而不是返回this(默认行为)。这个新对象的作用域中没有带的"name"变量

因此,当你创建对象时,你会得到一个附加了函数的对象,但它无法获得正确执行所需的变量。这就是为什么你会得到未定义的。

这有道理吗?我总是担心当我必须扩展文本框时我会胡言乱语?

或者,如果我把你的函数写得尽可能冗长,它会是这样的。

function Person(name){
  var this = new Object();
  this.name = name;
  var hello = function (){
    alert("hello " + this.name);
  } 
  this.hello = hello;
  var that = new Object();
  that.hello = hello;
  return that;
}

您似乎混淆了两件事。

a) 常规函数

function CreatePerson(name) {
    // create a new object
    var person = {};
    // or (if you want to provide a prototype)
    var person = Object.create(...);
    // fill it with some more data
    person.name = name;
    person.foo = 123;
    person.bar = function() { /* ... your method body ... */ }; 
}

调用类似于:

var person = CreatePerson("Jack");

b) 施工人员

function Person(name) {
    // called after a Person is created,
    // `this` is bound to the new object
    // and its prototype is set to `Person.prototype`
    this.name = name;
    this.foo = 123;
    this.bar = function() { /* ... your method body ... */ }; 
}
var person = new Person("Jack");

请注意此处的特殊new语法。

当使用这种风格时,您可能只想创建一次方法,而不是为每个创建的实例创建:

function Person(name) {
    // called after a Person is created,
    // `this` is bound to the new object
    // and its prototype is set to `Person.prototype`
    this.name = name;
    this.foo = 123;
}
Person.prototype.bar = function() {
    /* ... your method body ... */
};
var person = new Person("Jack");

这样做很有效。

如果你只想在函数中访问this,你可以这样做。您使用return{hello:hello}来声明函数,并且您不需要对它做任何操作,除非它是您想要的

示例1

       function _persons(array) {
          this.available = array;
          this.write = function () {
              writedata(this.available, '#array2');
          };
          this.SortAge = function () {
              array.sort(compare);
              writedata(this.available, '#array3');
          };
          array.sort(compareName);
      } 
     var users = new _persons(myarray);

示例2

  function Person(name ){
       this.name = name ;
        this.hello = function(){
        alert("hello " + this.name);
        }
      }
      var a = "john";
      var newPerson = new Person(a); 
      newPerson.hello(); var
      otherPerson = new Person("annie"); 
      otherPerson.hello();