JS对象

时间:2020-02-23 14:33:50  来源:igfitidea点击:

在本教程中,我们将学习JavaScript对象。

对象

JavaScript对象是一种特殊的变量类型,可以保存多个命名值。

要在JavaScript中创建对象,我们使用" {}"花括号。

对象的属性和值

在开/关括号内,我们有名称/值对。
这些称为对象属性和属性值。

语法propertyName:propertyValue

propertyValue可以是任何类型-空,未定义,数字,字符串,对象,函数,甚至是数组。

在下面的示例中,我们创建了一个具有一些属性和值的对象" student"。

var student = {
	name : "",
	studentid : 123
};

因此,在上面的示例中,"学生"是一个对象。
名称和学生身份是学生对象的属性。
" "和" 123"是属性的值。

对象方法

当为对象的属性分配函数时,它就是该对象的方法。

在下面的示例中,我们向学生对象添加了对象方法" displayStream"。

var student = {
	name : "",
	studentid : 123,

	displayStream : function () {
		console.log("Computer");
	}
};

因此,在上面的示例中,"学生"是一个对象。
displayStream是学生对象的属性。
并且它被分配了一个函数,因此,它是学生对象的方法。

访问对象属性

为了访问对象的属性,我们使用对象名称,后跟.运算符,然后使用属性名称。

在以下示例中,我们将访问学生对象的name属性。

var student = {
	name : "",
	studentid : 123,

	displayStream : function () {
		console.log("Computer");
	}
};

//accessing name property
console.log(student.name);

访问对象属性的另一种方法是使用方括号,然后将对象属性名称放在引号中。

在以下示例中,我们将访问学生对象的name属性。

var student = {
	name : "",
	studentid : 123,

	displayStream : function () {
		console.log("Computer");
	}
};

//accessing name property
console.log(student["name"]);

调用对象方法

要调用或者调用对象方法,我们使用对象名称,后跟。
运算符,然后是方法名称,再由(()运算符。
并且,如果有任何参数需要传递,则将其放在以逗号分隔的()括号内。

在下面的示例中,我们将调用学生对象的" displayStream"方法。

var student = {
	name : "",
	studentid : 123,

	displayStream : function () {
		console.log("Computer");
	}
};

//calling displayName method
student.displayStream();

向对象添加新属性

要向对象添加新属性,我们使用.运算符。

在下面的示例中,我们向学生对象添加了一个新的属性"点"。

var student = {
	name : "",
	studentid : 123,

	displayStream : function () {
		console.log("Computer");
	}
};

//adding a new property
student.points = 10;

向对象添加新属性的另一种方法是使用方括号[]

在下面的示例中,我们向学生对象添加了一个新的属性"点"。

var student = {
	name : "",
	studentid : 123,

	displayStream : function () {
		console.log("Computer");
	}
};

//adding a new property
student["points"] = 10;

向对象添加新方法

我们可以使用.运算符向对象添加新方法。

在以下示例中,我们向学生对象添加了一个新方法" displayMessage"。

var student = {
	name : "",
	studentid : 123,

	displayStream : function () {
		console.log("Computer");
	}
};

//adding a new method
student.displayMessage = function () {
	console.log("Hello World!");
};

this关键字

当我们想访问对象的属性时,可以在对象内部使用关键字" this"。

在下面的示例中,我们有一个Student对象,并将显示来自displayName方法的name属性的值。

当我们不使用this关键字时,我们将得到undefined作为输出,如下所示。

var student = {
	name : "",
	studentid : 123,

	displayName : function () {
		console.log(name);
	}
};

//calling the method
student.displayName();	//this will print undefined

之所以得到"未定义",是因为在displayName方法中,变量名称被视为新变量,而不是学生对象的name属性。
并且新变量始终获取未定义的值,因此输出是未定义的。

要从对象方法displayName访问学生对象的name属性,我们必须使用this关键字。

在学生对象内部,此关键字指向对象。

在以下示例中,我们将获得名称作为输出。

var student = {
	name : "",
	studentid : 123,

	displayName : function () {
		console.log(this.name);
	}
};

//calling the method
student.displayName();	//this will print ""

删除对象属性

要删除对象属性,我们使用delete关键字。

要删除属性,我们使用对象名称,后跟.运算符,然后使用对象属性名称。

在下面的示例中,我们删除了Student对象的studentid属性。

var student = {
	name : "",
	studentid : 123,

	displayName : function () {
		console.log(this.name);
	}
};

//delete object property
delete student.studentid;

删除对象属性的另一种方法是在对象后面加上方括号[]
在方括号内,我们将属性名称写在引号中。

在下面的示例中,我们删除了Student对象的studentid属性。

var student = {
	name : "",
	studentid : 123,

	displayName : function () {
		console.log(this.name);
	}
};

//delete object property
delete student["studentid"];

删除对象方法

要删除一个对象方法,我们使用delete关键字。

要删除该方法,我们使用对象名称,后跟.运算符,然后使用对象方法名称。

在以下示例中,我们将删除学生对象的displayName方法。

var student = {
	name : "",
	studentid : 123,

	displayName : function () {
		console.log(this.name);
	}
};

//delete object method
delete student.displayName;