正文

掌握JS面向对象编程，从实例到原型，轻松入门！

/0 浏览量
0815

JavaScript（简称JS）作为一门流行的前端编程语言，其面向对象编程（OOP）是开发者必须掌握的核心技能之一。面向对象编程可以让我们的代码更加模块化、可重用和易于维护。本文将从JavaScript的实例和原型出发，带你轻松入门JS面向对象编程。

实例与构造函数

在JavaScript中，创建对象主要有两种方式：使用构造函数和对象字面量。

构造函数

构造函数是使用function关键字定义的特殊函数，用于创建具有相同属性和方法的多个对象。构造函数通常以大写字母开头，以区别于普通函数。

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

var person1 = new Person('张三', 25);
var person2 = new Person('李四', 30);

在上面的例子中，Person是一个构造函数，它接受两个参数：name和age。通过new关键字，我们可以创建两个具有不同属性的Person对象。

对象字面量

对象字面量是一种更简洁的创建对象的方法，它直接使用大括号{}定义对象。

var person1 = {
  name: '张三',
  age: 25,
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

var person2 = {
  name: '李四',
  age: 30,
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

原型与继承

JavaScript中的对象都继承自Object对象，而Object对象的原型又是null。通过原型链，我们可以实现对象的继承。

原型链

在JavaScript中，每个对象都有一个__proto__属性，它指向其原型对象。当我们访问一个对象的属性或方法时，如果该对象自身没有该属性或方法，那么会沿着原型链向上查找，直到找到为止。

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

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

var person1 = new Person('张三', 25);
console.log(person1.sayHello()); // Hello, my name is 张三

在上面的例子中，person1对象的原型是Person.prototype，它包含sayHello方法。因此，我们可以通过person1.sayHello()调用该方法。

继承

JavaScript中的继承可以通过多种方式实现，以下是几种常见的继承方法：

  1. 原型链继承
function Student(name, age, className) {
  Person.call(this, name, age);
  this.className = className;
}

Student.prototype = new Person();
Student.prototype.constructor = Student;

var student1 = new Student('王五', 20, '计算机1班');
console.log(student1.sayHello()); // Hello, my name is 王五
  1. 构造函数继承
function Student(name, age, className) {
  Person.call(this, name, age);
  this.className = className;
}

Student.prototype = new Person();
Student.prototype.constructor = Student;
  1. 组合继承
function Student(name, age, className) {
  Person.call(this, name, age);
  this.className = className;
}

Student.prototype = new Person();
Student.prototype.constructor = Student;
  1. 原型式继承
function createObject(obj) {
  function F() {}
  F.prototype = obj;
  return new F();
}

var person = {
  name: '张三',
  age: 25,
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

var person1 = createObject(person);
console.log(person1.sayHello()); // Hello, my name is 张三
  1. 寄生式继承
function createObject(obj) {
  var clone = Object.create(obj);
  clone.sayHello = function() {
    console.log('Hello, my name is ' + this.name);
  };
  return clone;
}

var person = {
  name: '张三',
  age: 25,
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

var person1 = createObject(person);
console.log(person1.sayHello()); // Hello, my name is 张三
  1. 寄生组合式继承
function createObject(obj) {
  var clone = Object.create(obj);
  clone.sayHello = function() {
    console.log('Hello, my name is ' + this.name);
  };
  return clone;
}

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

Student.prototype = createObject(Person.prototype);
Student.prototype.constructor = Student;

通过以上介绍，相信你已经对JavaScript的面向对象编程有了初步的了解。在实际开发中，灵活运用各种继承方法，可以让你写出更加高效、可维护的代码。祝你在JavaScript的世界里一路顺风！

-- 展开阅读全文 --