为新对象添加函数,将对象添加到数组中.理解困难'这'关键字

Add function for new objects, adding object to an array. Difficulty understanding 'this' keyword

本文关键字:添加 对象 关键字 新对象 函数 数组      更新时间:2023-09-26

可能重复:
JavaScript“这";关键词

我已经编写了一个名为add的函数,其中包含参数firstName、lastName以及电子邮件、电话。在这个新功能中,目的是创建一个新的联系人对象,如bob和mary。

我的问题是关于this关键字的上下文和用法。this允许我将新创建的对象的属性值设置为传入的适当的添加函数参数。如果this的目的是什么?这一个词允许我在代码中做什么?是为了启用允许任何字符串按顺序通过函数参数以创建多个对象的功能吗?

我最近使用了this关键字,使我能够在多个对象上使用相同的函数,而不必在每个对象的基础上编写单独的函数。例如,可以为所有对象设置年龄属性的函数,而不是为每个对象单独设置年龄更改函数。

其次,我想检查一下我对将数据插入联系人阵列中适当位置的方式的理解是否正确。最后,我可以问一下这个关键词的上下文吗?

contacts[contacts.length] = this; 

与相同

contacts[2] = this;

若我并没有用最简洁的方式表达我的问题,我深表歉意。请在下面找到我的代码。对于这种编码情况,this关键字的任何答案或解释都将不胜感激。

var bob = {
    firstName: "Bob",
    lastName: "Jones",
    phoneNumber: "(650) 777 - 7777",
    email: "bob.jones@example.com"
};
var mary = {
    firstName: "Mary",
    lastName: "Johnson",  
    phoneNumber: "(650) 888 - 8888",
    email: "mary.johnson@example.com"
};
var contacts = [bob, mary];
    function add(firstName, lastName, email, telephone){
    this.firstName = firstName; 
    this.lastName = lastName;
    this.email = email;
    this.telephone = telephone;
    contacts[contacts.length] = this
    }
    var response1 = prompt("First Name?");
    var response2 = prompt("Last Name?");
    var response3 = prompt("Email?");
    var response4 = prompt("Telephone No.?");
    add(response1, response2, response3, response4);
add函数中的

this实际上引用了全局窗口对象,因此您将其添加到数组中,而不是添加新联系人。

您需要在该函数中创建一个新对象,并将其添加到数组中:

function add(firstName, lastName, email, telephone){
    var newContact = {
        firstName: firstName,
        lastName: lastName,
        email: email,
        telephone: telephone
    }
    contacts[contacts.length] = newContact;
}

以下是this-http://bonsaiden.github.com/JavaScript-Garden/#function.this

如果您真的想使用this,可以通过使用callapply:调用函数来指定this指的是什么

add.call({}, response1, response2, response3, response4); // pass new object as this
add.apply({}, [response1, response2, response3, response4]); // pass new object as this

this完全是关于范围和上下文的。它指的是使用它的更广泛的背景。

这里有一个例子:

function MyObject(one,two) {
this.one = one;
this.two = two;
}
Myobject.prototype.SayNumbers() {
alert(this.one + this.two);
}
var myobj = new MyObject("Foo","Bar");
myobj.Saynumbers();

在上例的上下文中,this"属于"它在"myobj"对象中使用的函数。这允许它访问对象的属性并向它们发出警报。

如果在全局范围内(即不在函数/对象内)使用this关键字,它将引用窗口对象。

this也可以通过引用传递,这对事件处理程序很有用。对于onclick事件,可以将this传递给事件处理函数,并对单击的对象执行操作。

试着做一些实验和研究-这个网站有一些很好的例子:http://www.quirksmode.org/js/this.html

this关键字有时有实际用途:

  • 对于SOMETHING.add(response1, response2, response3, response4)this将是SOMETHING

  • 对于SOMETHING = new add(response1, response2, response3, response4)this将是新创建的对象SOMETHING

但是,当您将add()作为函数而不是方法调用时,this是全局(窗口)对象。因此,您只需要创建四个全局变量(firstName、lastName、电子邮件和电话),以后每次向数组中添加条目时都会覆盖这些全局变量。请注意,如果您的代码是在最近的JavaScript解释器的"ES5严格模式"下执行的,那么add()函数的第一行将导致运行时错误。

(如果你想阅读更多内容,请参阅"这个"关键字是如何工作的?)

在您的情况下,我将避免使用this,而是显式地创建一个新对象。

function add(firstName, lastName, email, telephone){
    var obj = {
        firstName: firstName,
        lastName: lastName,
        email: email,
        telephone: telephone
    };
    contacts[contacts.length] = obj;
}

关于contacts[contacts.length] = obj;,一种替代方案是使用contacts.push(obj);。然而,你拥有它的方式非常好,事实上,可能会表现得稍微好一点。只要选择你喜欢的。