正文

JavaScript面向对象编程，小白必学技巧揭秘，轻松掌握对象、原型与继承！

/0 浏览量
1021

JavaScript 是一种广泛应用于网页开发的编程语言，其面向对象编程（OOP）特性使得开发者能够以更高效、更模块化的方式构建复杂的应用程序。对于编程小白来说，掌握JavaScript的面向对象编程是迈向高级开发者的重要一步。本文将揭秘JavaScript面向对象编程的三大关键点：对象、原型与继承，帮助小白轻松入门。

对象：构建自定义数据类型

在JavaScript中，对象是一种无序的集合，它由键值对组成，其中键是字符串或符号，值可以是任意数据类型。对象是JavaScript编程的基础，通过对象可以构建自定义的数据类型。

创建对象

创建对象主要有以下几种方式：

  1. 字面量方式：
let person = {
  name: '张三',
  age: 25,
  sayHello: function() {
    console.log(`你好，我是${this.name}，今年${this.age}岁。`);
  }
};
  1. 构造函数方式：
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log(`你好，我是${this.name}，今年${this.age}岁。`);
  };
}

let person = new Person('李四', 30);
  1. Object.create()方法：
let personPrototype = {
  sayHello: function() {
    console.log(`你好，我是${this.name}，今年${this.age}岁。`);
  }
};

let person = Object.create(personPrototype);
person.name = '王五';
person.age = 35;

访问对象属性

访问对象属性主要有以下几种方式：

  1. 点符号：
console.log(person.name); // 输出：王五
  1. 方括号：
console.log(person['age']); // 输出：35

原型：理解对象继承

在JavaScript中，每个对象都有一个原型（prototype）属性，该属性指向其构造函数的原型对象。原型对象是所有实例共享的属性和方法，通过原型可以实现对象的继承。

原型链

当访问一个对象的属性或方法时，如果该对象自身没有该属性或方法，则会沿着原型链向上查找，直到找到为止。

console.log(person.hasOwnProperty('name')); // 输出：true
console.log(person.hasOwnProperty('toString')); // 输出：false
console.log(person.__proto__.hasOwnProperty('toString')); // 输出：true

改变原型

可以通过Object.setPrototypeOf()方法改变一个对象的原型。

let animalPrototype = {
  eat: function() {
    console.log('吃东西');
  }
};

Object.setPrototypeOf(person, animalPrototype);

console.log(person.eat()); // 输出：吃东西

继承：实现代码复用

在JavaScript中，继承是实现代码复用的关键手段。通过继承，子类可以继承父类的属性和方法，从而避免重复编写相同的代码。

构造函数继承

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

Animal.prototype.sayName = function() {
  console.log(this.name);
};

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = new Animal();

let dog = new Dog('旺财');
console.log(dog.sayName()); // 输出：旺财

原型链继承

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

Animal.prototype.sayName = function() {
  console.log(this.name);
};

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

Dog.prototype = new Animal();

let dog = new Dog('旺财');
console.log(dog.sayName()); // 输出：旺财

组合继承

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

Animal.prototype.sayName = function() {
  console.log(this.name);
};

function Dog(name) {
  Animal.call(this, name);
  this.type = '狗';
}

Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;

let dog = new Dog('旺财');
console.log(dog.sayName()); // 输出：旺财
console.log(dog.type); // 输出：狗

寄生组合继承

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

Animal.prototype.sayName = function() {
  console.log(this.name);
};

function Dog(name) {
  Animal.call(this, name);
  this.type = '狗';
}

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

let dog = new Dog('旺财');
console.log(dog.sayName()); // 输出：旺财
console.log(dog.type); // 输出：狗

通过以上介绍，相信小白们已经对JavaScript面向对象编程有了初步的了解。在实际开发中，灵活运用对象、原型与继承，可以帮助我们更好地组织代码，提高开发效率。祝大家在编程的道路上越走越远！

-- 展开阅读全文 --