JavaScript对象学习小结

下面是关于“JavaScript对象学习小结”完整攻略的详细讲解。

一、对象

JavaScript 中的对象是一组属性的集合，其中每个属性通过键与值相关联。可以通过多种方式创建对象。

1.1 对象的创建

可以使用对象字面量创建对象，对象字面量是一个逗号分隔的键值对的列表，放在花括号中。

例如：

var student = {
  name: 'Tom',
  age: 20,
  gender: 'male',
  sayHi: function(){
    console.log('Hi, I am ' + this.name);
  }
};

也可以使用构造函数创建对象，构造函数其实就是一个普通的函数，关键在于调用这个函数时使用了 new 操作符。

例如：

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.sayHi = function() {
    console.log('Hi, I am ' + this.name);
  }
}

var student = new Person('Tom', 20, 'male');

1.2 属性操作

可以使用点号或者方括号来访问对象的属性：

console.log(student.name); //输出 Tom
console.log(student['age']); //输出 20

可以使用 delete 运算符来删除对象的属性：

delete student.age;

1.3 构造函数的原型

除了直接在构造函数中定义属性和方法，还可以使用构造函数的原型来共享属性和方法。

例如：

Person.prototype.sayHello = function() {
  console.log('Hello, I am ' + this.name);
};

这样创建出来的所有实例，都可以共享这个方法。

二、继承

JavaScript 中的继承是通过原型链来实现的。子类可以通过原型链访问父类的方法和属性。

2.1 基本继承

可以使用 Object.create() 函数来创建一个新的对象，并将原对象指定为新对象的原型。新对象继承了原对象的所有属性和方法。

例如：

var person = {
  name: 'Tom',
  age: 20,
  sayHi: function() {
    console.log('Hi, I am ' + this.name);
  }
};

var student = Object.create(person);
student.name = 'Jerry';
student.gender = 'male';

student.sayHi(); //输出 Hi, I am Jerry

2.2 借用构造函数实现继承

可以使用 call 或 apply 函数来调用父类的构造函数，并传递当前的 this。

例如：

function Person(name) {
  this.name = name;
}

function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}

var student = new Student('Tom', 3);

2.3 组合继承

组合继承是同时使用基本继承和借用构造函数实现继承的方式。

例如：

function Person(name) {
  this.name = name;
}

Person.prototype.sayHi = function() {
  console.log('Hi, I am ' + this.name);
};

function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

var student = new Student('Tom', 3);

三、示例说明

3.1 对象示例

假设我们要创建一个博客的数据模型：

var article = {
  title: 'JavaScript 对象学习小结',
  author: 'Tom',
  content: '...',
  comments: [
    { name: 'Jerry', content: '非常好的一篇文章！' },
    { name: 'Alice', content: '写的很好，感谢分享！' }
  ],
  likeCount: 10,
  addLike: function() {
    this.likeCount++;
  }
};

我们可以通过访问 article 对象的属性和方法，来实现博客的显示和操作。

3.2 继承示例

假设我们需要创建一个图形类，包含一个求面积的方法，以及一个圆形子类。

function Shape() {}
Shape.prototype.getArea = function() {}

function Circle(radius) {
  this.radius = radius;
}
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;
Circle.prototype.getArea = function() {
  return Math.PI * this.radius * this.radius;
}

var circle = new Circle(10);
console.log(circle.getArea());

通过这种继承方式，我们可以方便地实现圆形和其他形状的扩展，并且继承了 Shape 中的方法和属性。