JavaScript高级程序设计 阅读笔记(十三) js定义类或对象

yizhihongxing

JavaScript高级程序设计第十三章主要讲述了JavaScript中定义类或对象的方式及相关概念,包括工厂模式、构造函数模式、原型模式、组合模式等。下面我会针对这些主题进行详细讲解。

工厂模式

工厂模式是一种创建对象的方法,它利用函数来创建不同类型的对象。可以通过工厂模式来创建任意数量的对象。它的一个关键优势是,它可以隐藏创建对象的细节,使得外部代码只需知道返回的对象即可,而不用在意对象是如何创建的。

示例代码如下:

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

var person1 = createPerson("Tom", 29, "Software Engineer");
var person2 = createPerson("Jerry", 31, "Doctor");

person1.sayName(); // "Tom"
person2.sayName(); // "Jerry"

在这个例子中,我们创建了两个不同的人员对象并通过等于号将其赋值给不同的变量。这两个变量持有的引用代表两个不同的对象。同时,我们使用了工厂模式,其中函数createPerson()充当了工厂的角色。

构造函数模式

除了工厂模式,JavaScript中还有一种定义类或对象的方式叫做构造函数。构造函数几乎相当于传统面向对象编程中的类,可以用来创建多个相似的对象。构造函数的特点是使用new关键字创建对象,而函数名通常以大写字母开头。

示例代码如下:

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function() {
    console.log(this.name);
  };
}

var person1 = new Person("Tom", 29, "Software Engineer);
var person2 = new Person("Jerry", 31, "Doctor");

person1.sayName(); // "Tom"
person2.sayName(); // "Jerry"

在这个例子中,我们使用了构造函数Person()并从中创建了两个对象。我们使用了this关键字定义了对象属性和方法。然后,我们使用了new关键字来创建对象,并在构造函数中定义了对象的属性和方法。这样我们可以轻松地通过构造函数来创建多个相似的对象。

原型模式

原型模式是一种定义类和对象的方式,面向对象编程中广泛适用。JavaScript中的每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象。这个对象中包含了可以通过该函数创建的实例的共享方法和属性。

示例代码如下:

function Person() {}

Person.prototype.name = "Tom";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function() {
  console.log(this.name);
};

var person1 = new Person();
person1.sayName(); // "Tom"

var person2 = new Person();
person2.sayName(); // "Tom"

在这个例子中,我们定义了一个构造函数Person(),并在其原型上定义了属性和方法。在这种情况下,Person()的三个属性name、age和job就是Person()的所有实例所共享的属性。在创建Person的实例时只会在实例中创建一个指向Person.prototype的指针。

组合模式

组合模式是一个优秀的JavaScript编程实践。它结合了构造函数模式和原型模式的优点,实现了创建具有共享属性和方法的对象的GitHub。
示例代码如下:

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

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

var person1 = new Person("Tom", 29, "Software Engineer");
var person2 = new Person("Jerry", 31, "Doctor");

person1.sayName(); // "Tom"
person2.sayName(); // "Jerry"

在这个例子中我们使用了构造函数模式来定义name、age和job三个属性,然后使用原型模式来定义sayName()方法。由于通常情况下,方法比属性更重要,因此可以说这种方法比构造函数模式更为常用和推荐。这种创建对象的方式既兼顾了高效性,又使代码简洁易读。

以上就是JavaScript高级程序设计第十三章提到的工厂模式、构造函数模式、原型模式和组合模式等定义类或对象的方式及相关概念的完整攻略,希望能够帮助你更好地理解这些概念。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript高级程序设计 阅读笔记(十三) js定义类或对象 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 前端实现字符串GBK与GB2312的编解码(小结)

    前端实现字符串GBK与GB2312的编解码是用JS实现编解码操作,它需要涉及到对二进制码的操作。在操作编解码之前,我们需要先了解一些概念和原理。 GBK和GB2312是中文编码标准,其中GBK支持繁体中文;GB2312仅支持简体中文。 GBK字符集的起始位置与GB2312相同,但GBK字符集支持更多的汉字,因此GBK兼容GB2312,但GB2312不兼容GB…

    JavaScript 2023年5月19日
    00
  • JavaScript 检测文件的类型的方法

    JavaScript 检测文件类型的方法可以通过文件类型的扩展名或者文件的 MIME 类型来进行判断。下面是一些具体的步骤和示例说明。 通过文件类型的扩展名进行判断 JavaScript 可以通过 String 对象的 endsWith() 方法或者正则表达式匹配文件名的后缀来进行文件类型的判断。 使用 String.endsWith() 方法 endsWi…

    JavaScript 2023年5月27日
    00
  • JS添加删除一组文本框并对输入信息加以验证判断其正确性

    为了实现“JS添加删除一组文本框并对输入信息加以验证判断其正确性”,我们需要分为两个步骤来进行: 添加和删除文本框 对输入信息进行验证判断 下面详细讲解一下实现的过程。 添加和删除文本框 在HTML文件中,我们可以定义一个包含添加和删除按钮的表单。 <form> <div id="textboxes"> <!…

    JavaScript 2023年6月11日
    00
  • JavaScript通过使用onerror设置默认图像显示代替alt

    什么是onerror? onerror 是一个事件处理器,它可以触发当一个图像载入失败时。 如何使用onerror显示默认图像? 使用 onerror 处理器,我们可以设置默认图像来代替那些引起 onerror 事件的图像。示例代码如下: <img src="image.png" alt="Some text" …

    JavaScript 2023年5月28日
    00
  • 一些不错的JS 自定义函数第2/2页

    一些不错的JS 自定义函数攻略第2/2页 简介 在前一篇攻略中,我们介绍了一些有用的JS自定义函数,并且分析了他们的应用场景和使用方法。在本篇攻略中,我们将继续介绍一些实用的JS自定义函数。 目录 本文将会介绍以下JS自定义函数: debounce throttle trim debounce 函数名称:debounce 函数功能:函数防抖。在一定时间内,如…

    JavaScript 2023年5月27日
    00
  • js中toString()函数与valueOf()函数使用与区别

    js中 toString() 函数与valueOf() 函数使用与区别 在JavaScript中,几乎所有的数据类型都是对象,除了null和undefined。这些对象的实例都继承自一个共同的Object原型对象,因此它们也会同时继承Object原型对象上的方法和属性。其中,toString()函数和valueOf()函数是两个非常重要的方法,下面我们来仔细…

    JavaScript 2023年5月28日
    00
  • 纯编码实现微信小程序弹幕效果(非视频底)

    纯编码实现微信小程序弹幕效果(非视频底)的完整攻略分为以下几个步骤: 步骤一:创建一个基础的弹幕组件 首先,我们需要在小程序页面中创建一个基础的弹幕组件,实现弹幕的基本功能。 整体的实现思路如下: 使用 CSS 中的 position、left、top 属性实现弹幕的位置控制。 使用 Animation API 中的 translateX、translate…

    JavaScript 2023年5月19日
    00
  • 一个简单的JS时间控件示例代码(JS时分秒时间控件)

    下面是关于“一个简单的JS时间控件示例代码(JS时分秒时间控件)”的完整攻略。 1.概述 一个简单的JS时间控件,常见于某些表单页面,提供给用户选择时间的功能。这个示例的特点在于,它只显示时分秒,并按照24小时制呈现。 2.示例说明 下面以两个示例说明这个JS时间控件的用法。 2.1 示例1:基本用法 代码如下: <!DOCTYPE html> …

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部