正文

掌握JS面向对象，从基础入门到实战应用

/0 浏览量
0821

引言

JavaScript（简称JS）是一种广泛使用的编程语言，它使网页更加动态和交互式。在JS中，面向对象编程（OOP）是一种核心编程范式，它允许开发者创建可重用、模块化和可扩展的代码。本篇文章将带您从JS面向对象的基础概念入手，逐步深入到实战应用，帮助您全面掌握JS面向对象编程。

一、面向对象编程概述

1.1 面向对象的概念

面向对象编程（OOP）是一种编程范式，它将数据（属性）和行为（方法）封装在一起，形成一个独立的实体——对象。OOP的主要特点包括：

  • 封装：将数据和操作数据的方法封装在一起，对外提供统一的接口。
  • 继承：允许一个对象继承另一个对象的属性和方法。
  • 多态：同一个操作作用于不同的对象，可以有不同的解释和结果。

1.2 JS中的对象

在JavaScript中，对象是一种无序的集合，它包含一系列键值对。每个键是一个字符串或符号，而值可以是任何有效的JavaScript值（包括另一个对象）。

二、JS面向对象基础

2.1 创建对象

在JavaScript中，创建对象有几种方法：

  • 字面量：使用大括号{}创建一个对象，并在其中添加属性和方法。
  var person = {
    name: '张三',
    age: 20,
    sayHello: function() {
      console.log('你好，我是' + this.name);
    }
  };
  • 构造函数：使用构造函数创建对象，构造函数通常以大写字母开头。
  function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
      console.log('你好，我是' + this.name);
    };
  }
  var person1 = new Person('张三', 20);
  • Object.create()：使用Object.create()创建一个新对象，并指定原型对象。
  var personPrototype = {
    sayHello: function() {
      console.log('你好，我是' + this.name);
    }
  };
  var person2 = Object.create(personPrototype);
  person2.name = '李四';

2.2 属性和方法

  • 属性：对象的属性是键值对，其中键是字符串或符号，值可以是任何有效的JavaScript值。

  • 方法：对象的方法是函数，它存储在对象的属性中，可以通过对象名调用。

2.3 构造函数和原型链

  • 构造函数：构造函数是一个特殊的函数，用于创建对象。构造函数通常以大写字母开头，并通过new关键字调用。

  • 原型链：在JavaScript中，每个对象都有一个原型对象，它指向其构造函数的prototype属性。如果某个属性或方法在对象中不存在，JavaScript引擎会沿着原型链向上查找，直到找到该属性或方法。

三、继承

在JavaScript中，继承可以通过以下几种方式实现：

3.1 原型链继承

原型链继承是最简单的继承方式，通过将子对象的__proto__属性指向父对象的实例来实现。

function Parent() {
  this.parentProperty = true;
}

function Child() {
  this.childProperty = false;
}

Child.prototype = new Parent();

var child1 = new Child();
console.log(child1.parentProperty); // true

3.2 构造函数继承

构造函数继承通过在子类型构造函数中调用父类型构造函数来实现。

function Parent() {
  this.parentProperty = true;
}

function Child() {
  Parent.call(this); // 继承父类型构造函数
  this.childProperty = false;
}

var child1 = new Child();
console.log(child1.parentProperty); // true

3.3 组合继承

组合继承是原型链继承和构造函数继承的混合体，它结合了两种继承方式的优点。

function Parent() {
  this.parentProperty = true;
}

function Child() {
  Parent.call(this); // 继承父类型构造函数
  this.childProperty = false;
}

Child.prototype = new Parent(); // 继承父类型原型

3.4 寄生式继承

寄生式继承通过创建一个用于封装继承过程的函数来实现。

function createAnother(original) {
  var clone = Object.create(original);
  clone.sayHi = function() {
    console.log('hi');
  };
  return clone;
}

var person = {
  name: '张三',
  friends: ['李四', '王五']
};

var anotherPerson = createAnother(person);
console.log(anotherPerson.name); // 张三
console.log(anotherPerson.friends); // ['李四', '王五']

3.5 寄生组合式继承

寄生组合式继承是寄生式继承和组合式继承的混合体，它避免了构造函数继承中的原型链污染问题。

function inheritPrototype(child, parent) {
  var prototype = Object.create(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}

function Parent() {
  this.parentProperty = true;
}

function Child() {
  Parent.call(this);
}

inheritPrototype(Child, Parent);

四、实战应用

4.1 实现一个简单的单例模式

var Singleton = (function() {
  var instance;
  function createInstance() {
    var object = new Object('I am an instance');
    return object;
  }
  return {
    getInstance: function() {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

console.log(Singleton.getInstance()); // I am an instance
console.log(Singleton.getInstance()); // I am an instance

4.2 实现一个简单的工厂模式

function createPerson(name) {
  var o = new Object();
  o.name = name;
  o.sayName = function() {
    console.log(this.name);
  };
  return o;
}

var person1 = createPerson('张三');
var person2 = createPerson('李四');

person1.sayName(); // 张三
person2.sayName(); // 李四

4.3 实现一个简单的模块模式

var myModule = (function() {
  var privateVariable = 'I am private';
  function privateFunction() {
    console.log(privateVariable);
  }
  return {
    publicMethod: function() {
      console.log('I am public');
      privateFunction();
    }
  };
})();

myModule.publicMethod(); // I am public
// console.log(privateVariable); // Error: privateVariable is not defined

五、总结

通过本文的学习，您应该已经对JavaScript面向对象编程有了全面的了解。从基础概念到实战应用，本文旨在帮助您快速掌握JS面向对象编程。在实际开发过程中，灵活运用面向对象编程的思想，可以使您的代码更加清晰、可维护和可扩展。祝您在JavaScript的学习道路上越走越远！

-- 展开阅读全文 --