JavaScript网页编程的对象世界

2023-12-18 06:05:02

JavaScript对象：万物皆对象

在现实世界中，万物皆对象。对象是一个具体的事物，可以拥有行为和特征。例如，一个人可以是对象，他的行为包括走路、说话、吃饭等；他的特征包括姓名、年龄、性别等。

在JavaScript中，对象也是一个具体的事物，只不过它是一个虚拟的对象，存在于计算机内存中。JavaScript对象是无序属性的集合，其属性可以包含基本值、对象或函数。

JavaScript对象创建

我们可以使用多种方式来创建JavaScript对象。

使用字面量创建对象

var person = {
  name: "张三",
  age: 20,
  gender: "男"
};

使用构造函数创建对象

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

var person = new Person("张三", 20, "男");

使用工厂模式创建对象

function createPerson(name, age, gender) {
  return {
    name: name,
    age: age,
    gender: gender
  };
}

var person = createPerson("张三", 20, "男");

JavaScript对象操作

我们可以使用各种方法来操作JavaScript对象。

访问对象属性

var name = person.name;

修改对象属性

person.name = "李四";

添加对象属性

person.hobby = "打篮球";

删除对象属性

delete person.hobby;

JavaScript对象属性

JavaScript对象可以拥有任意数量的属性，每个属性都有一个名称和一个值。

属性名称可以是字符串、数字或符号。
属性值可以是任何类型的数据，包括基本值、对象或函数。
属性可以是可读的、可写的或只读的。

JavaScript对象方法

JavaScript对象也可以拥有方法，方法是对象的行为。

方法可以是函数，也可以是生成器函数。
方法可以接受参数，也可以不接受参数。
方法可以返回一个值，也可以不返回任何值。

JavaScript对象实例

JavaScript对象可以通过实例化构造函数来创建实例。

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;

  this.sayHello = function() {
    console.log("Hello, my name is " + this.name);
  };
}

var person1 = new Person("张三", 20, "男");
var person2 = new Person("李四", 30, "女");

person1.sayHello(); // Hello, my name is 张三
person2.sayHello(); // Hello, my name is 李四

JavaScript对象继承

JavaScript对象可以通过继承来获取另一个对象的属性和方法。

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;

  this.sayHello = function() {
    console.log("Hello, my name is " + this.name);
  };
}

function Student(name, age, gender, school) {
  Person.call(this, name, age, gender);

  this.school = school;

  this.sayHello = function() {
    console.log("Hello, my name is " + this.name + " and I am a student at " + this.school);
  };
}

var student1 = new Student("张三", 20, "男", "清华大学");

student1.sayHello(); // Hello, my name is 张三 and I am a student at 清华大学

JavaScript对象原型

JavaScript对象拥有一个原型，原型也是一个对象，它是对象的父对象。对象的原型包含了一些共有的属性和方法，这些属性和方法可以被对象继承。

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

var person1 = new Person("张三", 20, "男");

person1.sayHello(); // Hello, my name is 张三

JavaScript对象封装

JavaScript对象可以封装数据和行为，从而实现信息隐藏和数据保护。

function Person(name, age, gender) {
  // 私有变量
  var _name = name;
  var _age = age;
  var _gender = gender;

  // 公共方法
  this.getName = function() {
    return _name;
  };

  this.getAge = function() {
    return _age;
  };

  this.getGender = function() {
    return _gender;
  };

  // 特权方法
  this.setName = function(name) {
    _name = name;
  };

  this.setAge = function(age) {
    _age = age;
  };

  this.setGender = function(gender) {
    _gender = gender;
  };
}

var person1 = new Person("张三", 20, "男");

person1.getName(); // 张三
person1.getAge(); // 20
person1.getGender(); // 男

person1.setName("李四");
person1.setAge(30);
person1.setGender("女");

person1.getName(); // 李四
person1.getAge(); // 30
person1.getGender(); // 女

JavaScript对象多态

JavaScript对象可以实现多态，即同一方法可以根据不同的对象产生不同的行为。

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;

  this.sayHello = function() {
    console.log("Hello, my name is " + this.name);
  };
}

function Student(name, age, gender, school) {
  Person.call(this, name, age, gender);

  this.school = school;

  this.sayHello = function() {
    console.log("Hello, my name is " + this.name + " and I am a student at " + this.school);
  };
}

function Teacher(name, age, gender, subject) {
  Person.call(this, name, age, gender);

  this.subject = subject;

  this.sayHello = function() {
    console.log("Hello, my name is " + this.name + " and I am a teacher of " + this.subject);
  };
}

var person1 = new Person("张三", 20, "男");
var student1 = new Student("李四", 30, "女", "清华大学");
var teacher1 = new Teacher("王五", 40, "男", "数学");

person1.sayHello(); // Hello, my name is 张三
student1.sayHello(); // Hello, my name is 李四 and I am a student at 清华大学
teacher1.sayHello(); // Hello, my name is 王五 and I am a teacher of 数学