JavaScript 对象

时间:2019-08-20 13:50:44  来源:igfitidea点击:

JavaScript是一种面向对象编程(OOP)语言。

JS对象的特性

  1. 封装-将相关信息(无论是数据还是方法)一起存储在一个对象中的能力。

  2. 聚合——将一个对象存储在另一个对象中的能力。

  3. 继承——一个类的某些属性和方法依赖于另一个类(或多个类)的能力。

  4. 多态——编写一个函数或方法以多种不同方式工作的能力。

对象由特性(attribute)组成

如果一个特性包含一个函数,它被认为是对象的一个方法(method),否则特性被认为是一个属性(property)。

JS对象的属性

对象属性可以是三种基本数据类型中的任何一种(数字,字符串,布尔值)
也可以是任何抽象数据类型,比如另一个对象。

对象属性通常是在对象的方法内部使用的变量,但也可以是在整个页面中使用的全局可见的变量。

向对象添加属性

语法:

objectName.objectProperty = propertyValue;

例如,下面的代码使用文档对象的“title”属性获取文档标题。

var str = document.title;

JS对象的方法

方法是让对象做某件事或者对对象做某件事的函数。
方法被视为对象的行为。

函数和方法之间有一个小的区别:

  1. 函数是一个独立的语句单元。
  2. 方法是添加到一个对象上的,可以通过this关键字引用。
  3. 即方法是一种特殊的函数

下面的例子展示了如何使用document对象的write()方法在文档上写入内容。

document.write("要写入的文档内容");

用JavaScript脚本创建对象

JavaScript可以用4种方式创建对象:

  1. 直接使用对象字面量

  2. "new" 关键字

  3. ES6中可以使用class

  4. 使用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原生对象

  1. Number 对象

  2. Boolean 对象

  3. String 对象

  4. Array 对象

  5. Date 对象

  6. Math 对象

  7. RegExp 对象