js new object|极客笔记

js new object

1. 引言

在JavaScript中，对象是一种复合数据类型，用于存储和组织相关数据和功能。JavaScript的对象是无类型的，这意味着您可以随时添加、修改和删除对象的属性和方法。本文将详细介绍JavaScript中创建和使用新对象的方法，以及一些常见的应用场景。

2. 创建新对象的方法

在JavaScript中，创建对象的方法有多种。下面将介绍其中的几种常用方法。

2.1 使用字面量创建对象

通过使用花括号{}，我们可以使用字面量的方式创建一个新的对象，并为其添加属性和方法。

// 创建一个空对象
let person = {};

// 添加属性
person.name = "John";
person.age = 25;

// 添加方法
person.greet = function(){
  console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
};

// 调用方法
person.greet();

运行结果：

Hello, my name is John and I'm 25 years old.

2.2 使用构造函数创建对象

除了字面量创建对象的方式，我们还可以使用构造函数来创建新的对象。

// 创建一个构造函数
function Person(name, age){
  this.name = name;
  this.age = age;

  this.greet = function(){
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
  };
}

// 使用构造函数创建对象
let person1 = new Person("John", 25);
let person2 = new Person("Mary", 30);

person1.greet();
person2.greet();

运行结果：

Hello, my name is John and I'm 25 years old.
Hello, my name is Mary and I'm 30 years old.

2.3 使用Object.create()方法创建对象

另一种创建新对象的方法是使用Object.create()方法。该方法允许我们以指定的原型对象创建一个新的对象。

// 创建一个原型对象
let personPrototype = {
  greet: function(){
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
};

// 使用Object.create()方法创建新对象
let person = Object.create(personPrototype);
person.name = "John";
person.age = 25;

person.greet();

运行结果：

Hello, my name is John and I'm 25 years old.

3. 对象的属性和方法访问

对象的属性和方法可以使用点语法或方括号语法进行访问。

let person = {
  name: "John",
  age: 25,
  greet: function(){
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
};

// 使用点语法访问属性和方法
console.log(person.name);
console.log(person.greet);

// 使用方括号语法访问属性和方法
console.log(person['age']);
console.log(person['greet']);

运行结果：

John
[Function: greet]
25
[Function: greet]

4. 对象的属性和方法操作

在JavaScript中，我们可以使用以下方式对对象的属性和方法进行操作。

4.1 添加属性和方法

我们可以使用赋值运算符或点语法来添加新的属性和方法。

let person = {};

// 使用赋值运算符添加属性和方法
person.name = "John";
person.age = 25;
person.greet = function(){
  console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
};

// 使用点语法添加属性和方法
person['gender'] = "Male";
person['introduce'] = function(){
  console.log("I'm a " + this.gender + ".");
};

person.greet();
person.introduce();

运行结果：

Hello, my name is John and I'm 25 years old.
I'm a Male.

4.2 修改属性和方法

已经存在的属性和方法可以通过赋值运算符进行修改。

let person = {
  name: "John",
  age: 25,
  greet: function(){
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
};

// 修改属性和方法
person.name = "Mary";
person.age = 30;

person.greet();

运行结果：

Hello, my name is Mary and I'm 30 years old.

4.3 删除属性和方法

使用delete运算符可以删除对象的属性和方法。

let person = {
  name: "John",
  age: 25,
  greet: function(){
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
};

// 删除属性和方法
delete person.name;
delete person.greet;

console.log(person.name);  // 输出undefined
person.greet();  // 报错：person.greet is not a function

4.4 遍历对象的属性和方法

可以使用for…in循环来遍历对象的属性和方法。

let person = {
  name: "John",
  age: 25,
  gender: "Male",
  greet: function(){
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
};

// 遍历对象的属性和方法
for(let key in person){
  console.log(key + ": " + person[key]);
}

运行结果：

name: John
age: 25
gender: Male
greet: [Function: greet]

5. 对象的应用场景

对象在JavaScript中有着广泛的应用，以下是几个常见的应用场景。

5.1 模块化

通过对象，我们可以将相关的数据和功能组织起来，形成模块，使代码更加结构化和可维护。

let calculator = {
  add: function(a, b){
    return a + b;
  },
  subtract: function(a, b){
    return a - b;
  },
  multiply: function(a, b){
    return a * b;
  },
  divide: function(a, b){
    return a / b;
  }
};

console.log(calculator.add(2, 3));  // 输出5
console.log(calculator.multiply(4, 5));  // 输出20

5.2 包装复杂数据

对象可以用来包装复杂的数据结构，以便进行操作和传递。

let student = {
  name: "John",
  age: 25,
  grades: [85, 90, 95, 80],
  getAverageGrade: function(){
    let sum = 0;
    for(let grade of this.grades){
      sum += grade;
    }
    let average = sum / this.grades.length;
    return average;
  }
};

console.log(student.getAverageGrade());  // 输出87.5

5.3 面向对象编程

JavaScript中的对象允许我们使用面向对象的编程方式，通过封装、继承和多态来组织和管理代码。

5.3.1 封装

封装是面向对象编程中的一个重要概念，它允许我们将相关属性和方法封装在一个对象中，使其具有内部状态和行为，并对外部隐藏实现细节。

function Circle(radius){
  // 私有属性
  let _radius = radius;

  // 公有方法
  this.getRadius = function(){
    return _radius;
  };
  this.setRadius = function(radius){
    _radius = radius;
  };

  // 内部方法
  function calculateArea(){
    return Math.PI * _radius * _radius;
  }

  // 公有方法
  this.getArea = function(){
    return calculateArea();
  };
}

let circle = new Circle(5);
console.log(circle.getRadius());  // 输出5
circle.setRadius(10);
console.log(circle.getRadius());  // 输出10
console.log(circle.getArea());  // 输出314.1592653589793

5.3.2 继承

继承是面向对象编程中的另一个重要概念，它允许一个对象（子类）继承另一个对象（父类）的属性和方法，并可以添加自己的特定属性和方法。

function Shape(){
  this.name = "shape";
  this.getArea = function(){
    return 0;
  };
}

function Circle(radius){
  Shape.call(this);  // 调用父类构造函数
  this.name = "circle";
  this.radius = radius;
  this.getArea = function(){
    return Math.PI * this.radius * this.radius;
  };
}

let circle = new Circle(5);
console.log(circle.name);  // 输出"circle"
console.log(circle.getArea());  // 输出78.53981633974483

5.3.3 多态

多态是面向对象编程中的一个特性，它允许一个对象在不同的上下文中表现出不同的行为。

function Animal(){}

Animal.prototype.speak = function(){
  console.log("An unknown animal makes a sound.");
};

function Dog(){}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function(){
  console.log("The dog barks.");
};

function Cat(){}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

Cat.prototype.speak = function(){
  console.log("The cat meows.");
};

let animal = new Animal();
let dog = new Dog();
let cat = new Cat();

animal.speak();  // 输出"An unknown animal makes a sound."
dog.speak();  // 输出"The dog barks."
cat.speak();  // 输出"The cat meows."