JavaScript 对象
JavaScript是一种面向对象编程(OOP)语言。
JS对象的特性
封装-将相关信息(无论是数据还是方法)一起存储在一个对象中的能力。
聚合——将一个对象存储在另一个对象中的能力。
继承——一个类的某些属性和方法依赖于另一个类(或多个类)的能力。
多态——编写一个函数或方法以多种不同方式工作的能力。
对象由特性(attribute)组成
如果一个特性包含一个函数,它被认为是对象的一个方法(method),否则特性被认为是一个属性(property)。
JS对象的属性
对象属性可以是三种基本数据类型中的任何一种(数字,字符串,布尔值)
也可以是任何抽象数据类型,比如另一个对象。
对象属性通常是在对象的方法内部使用的变量,但也可以是在整个页面中使用的全局可见的变量。
向对象添加属性
语法:
objectName.objectProperty = propertyValue;
例如,下面的代码使用文档对象的“title”属性获取文档标题。
var str = document.title;
JS对象的方法
方法是让对象做某件事或者对对象做某件事的函数。
方法被视为对象的行为。
函数和方法之间有一个小的区别:
- 函数是一个独立的语句单元。
- 方法是添加到一个对象上的,可以通过this关键字引用。
- 即方法是一种特殊的函数
下面的例子展示了如何使用document对象的write()方法在文档上写入内容。
document.write("要写入的文档内容");
用JavaScript脚本创建对象
JavaScript可以用4种方式创建对象:
直接使用对象字面量
"new" 关键字
ES6中可以使用class
使用create()
对象字面量
通过语法规定的写法书写的文本即字面量,然后由js解析器进行解析并创建对象:
var database = {
db : "test",
table : "sql"
};
操作符 new
new操作符用于创建对象的实例。
要创建对象,new操作符后面跟着构造函数方法。
在下面的例子中,构造函数方法是Object()、Array()和Date()。
这些构造函数是内置的JavaScript函数。
var student = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("2010-01-01");
在上面的示例中,Object()、Array()和Date()是构造函数方法,它们是内置的JavaScript函数。
ES6中使用 class 创建对象
ECMAScript6中的class为创建一个新的JScript对象而定义的语法。
尽管JScript是OOP的语言,但在Ecmascript6之前,JavaScript并没有使用class。
Class student
{
Constructor (Name, Age)
{
this.Name = Name;
this.Age = Age;
this.getName = function()
{
return "学生信息:" + this.Name + this.Age;
}
}
}
var database = new student("Brad", 25);
使用create()创建对象
Object.create是JavaScript中的预构建对象类型。当创建一个新对象时,object.create() 方法将使用对象字面量作为原型。
var student = {
Name: "Bob",
Age: 45,
getName: function()
{
return "学生信息:" + this.Name + this.Age;
}
};
var Stu1 = Object.create(student);
Stu1.Name = "Hyman";
Stu1.Age = 25;
用户自定义的对象
所有用户定义的对象和内置对象都是object对象的后代(都继承自Object对象)。
Object()构造函数
构造函数是用于创建和初始化对象的函数。
JavaScript提供了一个特殊的构造函数Object()来构建对象。
将Object()构造函数的返回值被分配给一个变量。那么该变量包含对新对象的引用。
JavaScript如何创建对象示例
var book = new Object(); // 创建一个对象
book.subject = "Perl"; // 添加属性并赋值
book.author = "Larry Wall";
console.log("book对象的属性subject: " + book.subject );
console.log("book对象的属性author: " + book.author );
示例-js中如何通过用户定义函数来创建对象
this关键字用于引用传递给函数的对象。
function book(title, author) {
this.title = title;
this.author = author;
}
var myBook = new book("Perl", "Larry");
console.log("对象myBook的属性subject: " + book.subject );
console.log("对象myBook的属性author: " + book.author );
js如何在对象中定义方法
前面的示例演示了构造函数如何创建对象和分配属性。
但是我们还需要通过给对象分配方法来完成一个完整对象的定义。
JavaScript 在对象中添加方法示例
下面的例子展示了如何添加一个函数到对象中,从而成为对象的方法。
// 定义一个函数用作对象的方法
function addPrice(amount) {
this.price = amount;
}
function book(title, author) {
this.title = title;
this.author = author;
this.addPrice = addPrice; // 添加方法
}
var myBook = new book("Perl", "Larry");
myBook.addPrice(100);
console.log("Book的title属性: " + myBook.title);
console.log("Book的author属性: " + myBook.author);
console.log("Book的price属性: " + myBook.price);
“with”关键字
with关键字被用作引用对象的属性或方法的一种简写。
被指定为with的参数的对象将成为后面的代码块中的默认对象。
对象的属性和方法可以在不指定对象名称的情况下使用。
with语法
with object的语法是这样的:
with (object) {
这里面使用object对象的属性时,可以不使用 “object.”
}
with(obj)示例
// 定义一个函数作为对象的方法
function addPrice(amount) {
with(this) {
price = amount;
}
}
function book(title, author) {
this.title = title;
this.author = author;
this.price = 0;
this.addPrice = addPrice; // 添加方法
}
var myBook = new book("Perl", "Larry");
myBook.addPrice(100);
console.log("书的标题: " + myBook.title);
console.log("书的作者: " + myBook.author);
console.log("书的价格: " + myBook.price);
JavaScript对象Object内置方法
Object.create()
Object.create()方法创建新对象并将其链接到现有对象。
const student = {
printInfo: function () {
console.log(`名字:${this.name} 年龄:${this.age}`);
}
};
const s1 = Object.create(student);
s1.name= "bob";
s1.age= 18;
s1.printInfo();
Object.entries()
Object.entries()返回对象中属性的[key,value]对组成的数组。
const student = { 1: 'bob', 2: 'Hyman', 9: 'tom' };
console.log(Object.entries(student));
输出:
["1", "bob"] ["2", "Hyman"] ["9", "tom"]
Object.keys()
Object.keys()返回对象中属性的键的数组
let student = {
name: 'Steve',
age : 23
} ;
console.log(Object.keys(student));
输出:
["name", "age"]
Object.values()
Object.values() 返回对象自身属性值的数组。
var chars = {1:'x', 2:'y', 3:'z'};
console.log(Object.values(chars));
输出:
["x", "y", "z"]
JavaScript原生对象
JavaScript有几个内置或原生对象。
这些对象在程序中的任何地方都可以访问,并且在不同操作系统,不同的浏览器中都可以以同样的方式工作。
下面列出了JavaScript原生对象
Number 对象
Boolean 对象
String 对象
Array 对象
Date 对象
Math 对象
RegExp 对象

