搜索
首页web前端js教程Javascript 面向对象编程(一) 封装_js面向对象

学习Javascript,最难的地方是什么?

我觉得,Object(对象)最难。因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握。

下面就是我的学习笔记,希望对大家学习这个部分有所帮助。我主要参考了
以下两本书籍:

Javascript 面向对象编程(一) 封装_js面向对象

《面向对象的Javascript》(Object-Oriented JavaScript)

Javascript 面向对象编程(一) 封装_js面向对象

《Javascript高级程序设计(第二版)》(Professional JavaScript for Web Developers, 2nd Edition)

它们都是非常优秀的Javascript读物,推荐阅读。

笔记分成三部分。今天的第一部分是讨论"封装"(Encapsulation),后面的第二部分第三部分讨论"继承"(Inheritance)。

============================

Javascript 面向对象编程(一):封装

作者:阮一峰

Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。

那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢?

1. 生成对象的原始模式

假定我们把猫看成一个对象,它有"名字"和"颜色"两个属性。

复制代码 代码如下:

var Cat = {
    name : '',
    color : ''
  }

现在,我们需要根据这个原型对象,生成两个实例对象。
复制代码 代码如下:

  var cat1 = {}; // 创建一个空对象
    cat1.name = "大毛"; // 按照原型对象的属性赋值
    cat1.color = "黄色";
  var cat2 = {};
    cat2.name = "二毛";
    cat2.color = "黑色";

好了,这就是最简单的封装了。但是,这样的写法有两个缺点,一是如果多生成几个实例,写起来就非常麻烦;二是实例与原型之间,没有任何办法,可以看出有什么联系。
2. 原始模式的改进
我们可以写一个函数,解决代码重复的问题。
复制代码 代码如下:

  function Cat(name,color){
    return {
      name:name,
      color:color
    }
  }

然后生成实例对象,就等于是在调用函数:
复制代码 代码如下:

  var cat1 = Cat("大毛","黄色");
  var cat2 = Cat("二毛","黑色");

这种方法的问题依然是,cat1和cat2之间没有内在的联系,不能反映出它们是同一个原型对象的实例。
3. 构造函数模式
为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。
所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。
比如,猫的原型对象现在可以这样写,
复制代码 代码如下:

  function Cat(name,color){
    this.name=name;
    this.color=color;
  }

我们现在就可以生成实例对象了。
复制代码 代码如下:

  var cat1 = new Cat("大毛","黄色");
  var cat2 = new Cat("二毛","黑色");
  alert(cat1.name); // 大毛
  alert(cat1.color); // 黄色

这时cat1和cat2会自动含有一个constructor属性,指向它们的构造函数。
复制代码 代码如下:

  alert(cat1.constructor == Cat); //true
  alert(cat2.constructor == Cat); //true

Javascript还提供了一个instanceof运算符,验证原型对象与实例对象之间的关系。
复制代码 代码如下:

  alert(cat1 instanceof Cat); //true
  alert(cat2 instanceof Cat); //true

4. 构造函数模式的问题
构造函数方法很好用,但是存在一个浪费内存的问题。
请看,我们现在为Cat对象添加一个不变的属性"type"(种类),再添加一个方法eat(吃老鼠)。那么,原型对象Cat就变成了下面这样:
复制代码 代码如下:

  function Cat(name,color){
    this.name = name;
    this.color = color;
    this.type = "猫科动物";
    this.eat = function(){alert("吃老鼠");};
  }

还是采用同样的方法,生成实例:
复制代码 代码如下:

  var cat1 = new Cat("大毛","黄色");
  var cat2 = new Cat ("二毛","黑色");
  alert(cat1.type); // 猫科动物
  cat1.eat(); // 吃老鼠

表面上好像没什么问题,但是实际上这样做,有一个很大的弊端。那就是对于每一个实例对象,type属性和eat()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存。这样既不环保,也缺乏效率。
  alert(cat1.eat == cat2.eat); //false
能不能让type属性和eat()方法在内存中只生成一次,然后所有实例都指向那个内存地址呢?回答是可以的。
5. Prototype模式
Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。
这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。
复制代码 代码如下:

  function Cat(name,color){
    this.name = name;
    this.color = color;
  }
  Cat.prototype.type = "猫科动物";
  Cat.prototype.eat = function(){alert("吃老鼠")};

然后,生成实例。
复制代码 代码如下:

  var cat1 = new Cat("大毛","黄色");
  var cat2 = new Cat("二毛","黑色");
  alert(cat1.type); // 猫科动物
  cat1.eat(); // 吃老鼠

这时所有实例的type属性和eat()方法,其实都是同一个内存地址,指向prototype对象,因此就提高了运行效率。
  alert(cat1.eat == cat2.eat); //true
6. Prototype模式的验证方法
6.1 isPrototypeOf()
这个方法用来判断,某个proptotype对象和某个实例之间的关系。
复制代码 代码如下:

  alert(Cat.prototype.isPrototypeOf(cat1)); //true
  alert(Cat.prototype.isPrototypeOf(cat2)); //true

6.2 hasOwnProperty()
每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性。
复制代码 代码如下:

  alert(cat1.hasOwnProperty("name")); // true
  alert(cat1.hasOwnProperty("type")); // false

6.3 in运算符
in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性。
复制代码 代码如下:

  alert("name" in cat1); // true
  alert("type" in cat1); // true

in运算符还可以用来遍历某个对象的所有属性。
  for(var prop in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }
未完,请继续阅读这个系列的第二部分《构造函数的继承》和第三部分《非构造函数的继承》。

(完)
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
如何使用Go语言实现面向对象的事件驱动编程如何使用Go语言实现面向对象的事件驱动编程Jul 20, 2023 pm 10:36 PM

如何使用Go语言实现面向对象的事件驱动编程引言:面向对象的编程范式被广泛应用于软件开发中,而事件驱动编程是一种常见的编程模式,它通过事件的触发和处理来实现程序的流程控制。本文将介绍如何使用Go语言实现面向对象的事件驱动编程,并提供代码示例。一、事件驱动编程的概念事件驱动编程是一种基于事件和消息的编程模式,它将程序的流程控制转移到事件的触发和处理上。在事件驱动

解析PHP面向对象编程中的享元模式解析PHP面向对象编程中的享元模式Aug 14, 2023 pm 05:25 PM

解析PHP面向对象编程中的享元模式在面向对象编程中,设计模式是一种常用的软件设计方法,它可以提高代码的可读性、可维护性和可扩展性。享元模式(Flyweightpattern)是设计模式中的一种,它通过共享对象来降低内存的开销。本文将探讨如何在PHP中使用享元模式来提高程序性能。什么是享元模式?享元模式是一种结构型设计模式,它的目的是在不同对象之间共享相同的

python是面向对象还是面向过程python是面向对象还是面向过程Jan 05, 2023 pm 04:54 PM

python是面向对象的。Python语言在设计之初,就定位为一门面向对象的编程语言,“Python中一切皆对象”就是对Pytho 这门编程语言的完美诠释。类和对象是Python的重要特征,相比其它面向对象语言,Python很容易就可以创建出一个类和对象;同时,Python也支持面向对象的三大特征:封装、继承和多态。

go语言是面向对象的吗go语言是面向对象的吗Mar 15, 2021 am 11:51 AM

go语言既不是面向对象,也不是面向过程,因为Golang并没有明显的倾向,而是更倾向于让编程者去考虑该怎么去用它,也许它的特色就是灵活,编程者可以用它实现面向对象,但它本身不支持面向对象的语义。

如何使用Go语言实现面向对象的数据库访问如何使用Go语言实现面向对象的数据库访问Jul 25, 2023 pm 01:22 PM

如何使用Go语言实现面向对象的数据库访问引言:随着互联网的发展,大量的数据需要被存储和访问,数据库成为了现代应用开发中的重要组成部分。而作为一门现代化、高效性能的编程语言,Go语言很适合用来处理数据库操作。而本文将重点讨论如何使用Go语言实现面向对象的数据库访问。一、数据库访问的基本概念在开始讨论如何使用Go语言实现面向对象的数据库访问之前,我们先来了解一下

面向对象是啥意思面向对象是啥意思Jul 17, 2023 pm 02:03 PM

面向对象是软件开发方法,一种编程范式。是一种将面向对象的思想应用于软件开发过程并指导开发活动的系统方法。这是一种基于“对象”概念的方法论。对象是由数据和允许的操作组成的包,它与目标实体有直接的对应关系。对象类定义了一组具有类似属性的对象。面向对象是基于对象的概念,以对象为中心,以类和继承为构建机制,认识、理解和描绘客观世界,设计和构建相应的软件系统。

PHP面向对象编程入门指南PHP面向对象编程入门指南Jun 11, 2023 am 09:45 AM

PHP作为一种广泛使用的编程语言,已成为构建动态网站和网络应用程序的首选语言之一。其中,面向对象编程(OOP)的概念和技术越来越受到开发者的欢迎和推崇。本篇文章将为读者提供PHP面向对象编程的入门指南,介绍OOP的基本概念,语法和应用。什么是面向对象编程(OOP)?面向对象编程(Object-OrientedProgramming,简称OOP),是一种编程

Go语言中的面向对象编程方法Go语言中的面向对象编程方法Jun 01, 2023 am 11:21 AM

随着计算机技术的不断进步,编程语言也在不断发展与更新,每一种新的编程语言都有其自己独特的特点和优势。其中,Go语言作为一种比较新的编程语言,已经逐渐受到了开发者们的关注和喜爱。其中,面向对象编程方法是Go语言编程的重要组成部分,下面我们就来一起了解一下Go语言中的面向对象编程方法。一、Go语言中的面向对象编程面向对象编程(OOP,Object-Oriente

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。