JavaScript面向对象编程:从全局污染到封装与原型链详解

作者:木棉时间:2026-10-30 18:42:31浏览:314

本文详解JavaScript面向对象编程的核心概念。从最初的全局函数写法入手,分析其导致的变量污染问题,进而引入对象字面量、构造函数及原型链机制。通过具体代码实例,演示如何实现属性与方法的封装、链式调用以及基于闭包的安全模式,帮助开发者理解JS中类与对象的设计逻辑。

JavaScript面向对象(OOP)设计模式的核心在于通过对象组织代码。

早期全局函数写法的局限性

在早期的JavaScript开发中,开发者通常采用直接定义多个独立函数的形式来编写代码。


 function checkName(){
    //验证姓名
  }

  function checkEmail(){
    //验证邮箱
  }

  function checkPassword(){
    //验证密码
  }

这种写法会导致全局变量严重污染,随着项目规模扩大,命名冲突风险显著增加。因此,代码结构需要向更高级的形式过渡。


var checkObject = {

  checkName : function(){};
  checkEmail: function(){};
  checkPassword: funcion(){}; 

}

//也可如此写
var checkObject = {} // || function(){}
checkObject.checkName = function(){};
checkObject.checkEmail = function(){};
checkObject.checkPassword = function(){};


//以上这两种写法不能复制一份,也就是说在new 方法创建新的对象的时候,新对象不能继承这些方法

上述直接调用的方式并非通过新建对象实例来复用代码。若需实现对象的复制,可采用返回新对象字面量的方式,例如通过构造函数返回包含方法的对象。


var checkObject = function(){

    return {
      checkName:function(){},
      checkEmail:function(){},
      checkPassword:function(){}
    }
  }
//使用的时候 可以

var a = checkObject();
a.checkName();



构造函数与原型链的应用

虽然上述方法实现了对象的创建,但新创建的实例与原始构造函数之间缺乏继承关系,这不符合面向对象编程中类与实例的关联原则。因此,更推荐采用构造函数结合原型的方式书写代码。


  var checkObject = function(){
    this.checkName = function(){}
    this.checkEmail = function(){}
    this.checkPassword = function(){}
  }
//像这样我们便可以用CheckObject 来创建新的对象了,通过new 来创建对象,创建出来的每个对象都会对this上的属性进行复制,但是这么做的话,每次都会有相对较大消耗,对于共有的方法,我们可以放在对象的原型上

var checkObject = function(){};
checkObject.prototype.checkName = function(){};
//...


//这样写要将prototype 书写很多遍 ,所以我们可以这么写,并实现链式调用,将this返回

var checkObject = function(){};
checkObject.prototype={
  checkName:function(){
    //验证姓名
    return this;
  },

  checkEmail:function(){
    //验证邮箱
    return this
  },

  checkPassword:function(){
    //验证密码
    return this;
  }  

}

// 这两种方式不可混用,否则后边会覆盖前边,此时我们调用只需

new checkObject().checkName().checkEmail().checkPassword();

下面再来介绍一下面向对象和面向过程两种编程方式 .page 10

使用多个独立函数编写代码属于面向过程的实现方式,这种方式引入了大量全局变量,不利于代码复用,且使用者无法修改内部逻辑。改用面向对象方式后,我们将需求抽象为一个对象,即“类”。面向对象的一个重要特征是封装,即将属性和方法封装在单一对象中,如同将物品放入旅行箱,便于统一管理和使用。尽管初期直接摆放看似便捷,但数据量增大后,封装带来的管理优势便显现出来。


  var Book = (function () {
    //静态私有变量
    var bookNum = 0;
    //静态私有方法
    function checkBook() {
    }

    //返回构造函数
    return function (newId, newName, newPrice) {
      //私有变量
      var name, price;
      //私有方法
      function checkId(id) {
      }
      //特权方法
      this.getPrice = function () {
      };
      this.getName = function () {
      };
      this.setName = function (name) {
        this.name = name
      };
      this.setPrice = function () {
      };
      //公有属性
      this.id = newId;
      //公有方法
      this.copy = function () {
      };
      bookNum++;
      if (bookNum > 100)
        throw new Error('oop javascript');

      //构造器 实例化过程中被调用的方法
      this.setName(name);
      this.setPrice(price);

    }
  })();

  Book.prototype = {
    //静态公有属性
    isJSBook: false,
    //静态公有方法
    display: function () {
    }

  };
  //对比Java 别被js 起的这些名字弄混了 其实Js 就模仿了一个New 其他的跟Java基本一样 类 全局变量 方法 有自己的理解比较好 以前未想明白
  // java 为什么那么些

为了在代码视觉上更贴近传统类的定义,我们将原本定义在原型上的方法整合到构造函数内部或类结构中。


 var Book = (function () {
    //静态私有变量
    var bookNum = 0;
    //静态私有方法
    function checkBook() {
    }

    //返回构造函数
     function _Book(newId, newName, newPrice) {
      //私有变量
      var name, price;
      //私有方法
      function checkId(id) {
      }
      //特权方法
      this.getPrice = function () {
      };
      this.getName = function () {
      };
      this.setName = function (name) {
        this.name = name
      };
      this.setPrice = function () {
      };
      //公有属性
      this.id = newId;
      //公有方法
      this.copy = function () {
      };
      bookNum++;
      if (bookNum > 100)
        throw new Error('oop javascript');

      //构造器 实例化过程中被调用的方法
      this.setName(name);
      this.setPrice(price);

    }
    _Book.prototype = {
      //静态公有属性
      isJSBook: false,
      //静态公有方法
      display: function () {
      }

    };
    return _Book;
  })();


面向对象封装与安全模式

此外,还可以介绍一种创建对象的安全模式,即通过立即执行函数(IIFE)结合闭包来实现私有变量与特权方法的封装。


//注意 执行new Book 方法之前 this.title 会先执行一次
  var Book = function (title) {
    if (this instanceof Book) {
      alert(1);
      this.title = title;
    }else{
      return new Book(title);
    }
  };

  var book = new Book('js');
  alert(book.title);

感谢阅读,希望本文能帮助您理解JavaScript面向对象编程的基本实例,感谢大家对本站的支持!

作者最新文章