JavaScript面向对象编程:(2)封装

2024-06-22 17:58

本文主要是介绍JavaScript面向对象编程:(2)封装,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

1 封装中prototype对象

1.1 构造函数的缺点

1.2 prototype属性的作用

1.3 原型链

1.4 constructor属性

2 Object.getPrototypeOf方法

3 Object.create方法

4 isPrototypeOf方法


1 封装中prototype对象

1.1 构造函数的缺点

JavaScript通过构造函数生成新对象,因此构造函数可以视为对象的模板。实例对象的属性和方法,可以定义在构造函数内部。

function Cat (name, color) {this.name = name;this.color = color;
}var cat1 = new Cat('大毛', '白色');cat1.name // '大毛'
cat1.color // '白色'

上面代码的Cat函数是一个构造函数,函数内部定义了name属性和color属性,所有实例对象都会生成这两个属性。但是,这样做是对系统资源的浪费,因为同一个构造函数的对象实例之间,无法共享属性。

function Cat(name, color) {this.name = name;this.color = color;this.meow = function () {console.log('mew, mew, mew...');};
}var cat1 = new Cat('大毛', '白色');
var cat2 = new Cat('二毛', '黑色');cat1.meow === cat2.meow
// false

上面代码中,cat1cat2是同一个构造函数的实例。但是,它们的meow方法是不一样的,就是说每新建一个实例,就会新建一个meow方法。这既没有必要,又浪费系统资源,因为所有meow方法都是同样的行为,完全应该共享。

1.2 prototype属性的作用

在JavaScript语言中,每一个对象都有一个对应的原型对象,被称为prototype对象。定义在原型对象上的所有属性和方法,都能被派生对象继承。这就是JavaScript继承机制的基本设计。

除了这种方法,JavaScript还提供了另一种定义实例对象的方法。我们知道,构造函数是一个函数,同时也是一个对象,也有自己的属性和方法,其中有一个prototype属性指向另一个对象,一般称为prototype对象。该对象非常特别,只要定义在它上面的属性和方法,能被所有实例对象共享。也就是说,构造函数生成实例对象时,自动为实例对象分配了一个prototype属性。

function Animal (name) {this.name = name;
}Animal.prototype.color = "white";var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');cat1.color // 'white'
cat2.color // 'white'

上面代码对构造函数Animal的prototype对象,添加了一个color属性。结果,实例对象cat1和cat2都带有该属性。

更特别的是,只要修改prototype对象,变动就立刻会体现在实例对象。

Animal.prototype.color = "yellow";cat1.color // 'yellow'
cat2.color // 'yellow'

上面代码将prototype对象的color属性的值改为yellow,两个实例对象的color属性的值立刻就跟着变了。这是因为实例对象其实没有color属性,都是读取prototype对象的color属性。也就是说,当实例对象本身没有某个属性或方法的时候,它会到构造函数的prototype对象去寻找该属性或方法。这就是prototype对象的特殊之处。

如果实例对象自身就有某个属性或方法,它就不会再去prototype对象寻找这个属性或方法。

cat1.color = 'black';cat2.color // 'yellow'
Animal.prototype.color // "yellow";

上面代码将实例对象cat1的color属性改为black,就使得它不用再去prototype对象读取color属性,后者的值依然为yellow。

总而言之,prototype对象的作用,就是定义所有实例对象共享的属性和方法,所以它也被称为实例对象的原型,而实例对象可以视作从prototype对象衍生出来的。

Animal.prototype.walk = function () {console.log(this.name + ' is walking.');
};

上面代码在Animal.protype对象上面定义了一个walk方法,这个方法将可以在所有Animal实例对象上面调用。

1.3 原型链

由于JavaScript的所有对象都有构造函数,而所有构造函数都有prototype属性(其实是所有函数都有prototype属性),所以所有对象都有自己的prototype原型对象。

因此,一个对象的属性和方法,有可能是定义它自身上面,也有可能定义在它的原型对象上面(就像上面代码中的walk方法)。由于原型本身也是对象,又有自己的原型,所以形成了一条原型链(prototype chain)。比如,a对象是b对象的原型,b对象是c对象的原型,以此类推。因为追根溯源,最源头的对象都是从Object构造函数生成(使用new Object()命令),所以如果一层层地上溯,所有对象的原型最终都可以上溯到Object.prototype。那么,Object.prototype有没有原型呢?回答可以是有,也可以是没有,因为Object.prototype的原型是没有任何属性和方法的null。

Object.getPrototypeOf(Object.prototype)
// null

上面代码表示Object.prototype对象的原型是null,由于null没有任何属性,所以原型链到此为止。

“原型链”的作用在于,当读取对象的某个属性时,JavaScript引擎先寻找对象本身的属性,如果找不到,就到它的原型去找,如果还是找不到,就到原型的原型去找。以此类推,如果直到最顶层的Object.prototype还是找不到,则返回undefined

举例来说,如果让某个函数的prototype属性指向一个数组,就意味着该函数可以用作数组的构造函数,因为它生成的实例对象都可以通过prototype属性调用数组方法。

function MyArray (){}MyArray.prototype = new Array();
MyArray.prototype.constructor = MyArray;var mine = new MyArray();
mine.push(1, 2, 3);mine.length // 3
mine instanceof Array // true

上面代码的mine是MyArray的实例对象,由于MyArray的prototype属性指向一个数组,使得mine可以调用数组方法(这些方法其实定义在数组的prototype对象上面)。至于最后那行instanceof表达式,我们知道instanceof运算符用来比较一个对象是否为某个构造函数的实例,最后一行表示mine为Array的实例。

mine instanceof Array// 等同于(Array === MyArray.prototype.constructor) ||
(Array === Array.prototype.constructor) ||
(Array === Object.prototype.constructor )

上面代码说明了instanceof运算符的实质,它依次与实例对象的所有原型对象的constructor属性(关于该属性的介绍,请看下一节)进行比较,只要有一个符合就返回true,否则返回false。

1.4 constructor属性

prototype对象有一个constructor属性,默认指向prototype对象所在的构造函数

function P() {}P.prototype.constructor === P
// true

由于constructor属性定义在prototype对象上面,意味着可以被所有实例对象继承。

function P() {}var p = new P();p.constructor
// function P() {}p.constructor === P.prototype.constructor
// truep.hasOwnProperty('constructor')
// false

上面代码表示p是构造函数P的实例对象,但是p自身没有contructor属性,该属性其实是读取原型链上面的P.prototype.constructor属性。

constructor属性的作用是分辨prototype对象到底定义在哪个构造函数上面。

function F(){};var f = new F();f.constructor === F // true
f.constructor === RegExp // false

上面代码表示,使用constructor属性,确定变量f的构造函数是F,而不是RegExp。

2 Object.getPrototypeOf方法

Object.getPrototypeOf方法返回一个对象的原型。

// 空对象的原型是Object.prototype
Object.getPrototypeOf({}) === Object.prototype
// true// 函数的原型是Function.prototype
function f() {}
Object.getPrototypeOf(f) === Function.prototype
// true// 假定F为构造函数,f为F的实例对象
// 那么,f的原型是F.prototype
var f = new F();
Object.getPrototypeOf(f) === F.prototype
// true

3 Object.create方法

Object.create方法用于生成新的对象,可以替代new命令。它接受一个对象作为参数,返回一个新对象,后者完全继承前者的属性,即前者成为后者的原型。

var o1 = { p: 1 };
var o2 = Object.create(o1);o2.p // 1

上面代码中,Object.create方法在o1的基础上生成了o2。此时,o1成了o2的原型,也就是说,o2继承了o1所有的属性的方法

Object.create方法基本等同于下面的代码,如果老式浏览器不支持Object.create方法,可以用下面代码自己部署。

if (typeof Object.create !== "function") {Object.create = function (o) {function F() {}F.prototype = o;return new F();};
}

上面代码表示,Object.create方法实质是新建一个构造函数F,然后让Fprototype属性指向作为原型的对象o,最后返回一个F的实例,从而实现让实例继承o的属性。

下面三种方式生成的新对象是等价的。

var o1 = Object.create({});
var o2 = Object.create(Object.prototype);
var o3 = new Object();

如果想要生成一个不继承任何属性(比如toString和valueOf方法)的对象,可以将Object.create的参数设为null。

var o = Object.create(null);o.valueOf()
// TypeError: Object [object Object] has no method 'valueOf'

上面代码表示,如果对象o的原型是null,它就不具备一些定义在Object.prototype对象上面的属性,比如valueOf方法。

使用Object.create方法的时候,必须提供对象原型,否则会报错。

Object.create()
// TypeError: Object prototype may only be an Object or null

Object.create方法生成的新对象,动态继承了原型。在原型上添加或修改任何方法,会立刻反映在新对象之上。

var o1 = { p: 1 };
var o2 = Object.create(o1);o1.p = 2;
o2.p
// 2

上面代码表示,修改对象原型会影响到新生成的对象。

除了对象的原型,Object.create方法还可以接受第二个参数,表示描述属性的attributes对象,跟用在Object.defineProperties方法的格式是一样的。它所描述的对象属性,会添加到新对象。

var o = Object.create(Object.prototype, {p1: { value: 123, enumerable: true },p2: { value: "abc", enumerable: true }
});o.p1 // 123
o.p2 // "abc"

由于Object.create方法不使用构造函数,所以不能用instanceof运算符判断,对象是哪一个构造函数的实例。这时,可以使用下面的isPrototypeOf方法,判读原型是哪一个对象。

4 isPrototypeOf方法

isPrototypeOf方法用来判断一个对象是否是另一个对象的原型。

var o1 = {};
var o2 = Object.create(o1);
var o3 = Object.create(o2);o2.isPrototypeOf(o3) // true
o1.isPrototypeOf(o3) // true

上面代码表明,只要某个对象处在原型链上,isProtypeOf都返回true。

这篇关于JavaScript面向对象编程:(2)封装的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1085009

相关文章

Java五子棋之坐标校正

上篇针对了Java项目中的解构思维,在这篇内容中我们不妨从整体项目中拆解拿出一个非常重要的五子棋逻辑实现:坐标校正,我们如何使漫无目的鼠标点击变得有序化和可控化呢? 目录 一、从鼠标监听到获取坐标 1.MouseListener和MouseAdapter 2.mousePressed方法 二、坐标校正的具体实现方法 1.关于fillOval方法 2.坐标获取 3.坐标转换 4.坐

Spring Cloud:构建分布式系统的利器

引言 在当今的云计算和微服务架构时代,构建高效、可靠的分布式系统成为软件开发的重要任务。Spring Cloud 提供了一套完整的解决方案,帮助开发者快速构建分布式系统中的一些常见模式(例如配置管理、服务发现、断路器等)。本文将探讨 Spring Cloud 的定义、核心组件、应用场景以及未来的发展趋势。 什么是 Spring Cloud Spring Cloud 是一个基于 Spring

Javascript高级程序设计(第四版)--学习记录之变量、内存

原始值与引用值 原始值:简单的数据即基础数据类型,按值访问。 引用值:由多个值构成的对象即复杂数据类型,按引用访问。 动态属性 对于引用值而言,可以随时添加、修改和删除其属性和方法。 let person = new Object();person.name = 'Jason';person.age = 42;console.log(person.name,person.age);//'J

java8的新特性之一(Java Lambda表达式)

1:Java8的新特性 Lambda 表达式: 允许以更简洁的方式表示匿名函数(或称为闭包)。可以将Lambda表达式作为参数传递给方法或赋值给函数式接口类型的变量。 Stream API: 提供了一种处理集合数据的流式处理方式,支持函数式编程风格。 允许以声明性方式处理数据集合(如List、Set等)。提供了一系列操作,如map、filter、reduce等,以支持复杂的查询和转

Java面试八股之怎么通过Java程序判断JVM是32位还是64位

怎么通过Java程序判断JVM是32位还是64位 可以通过Java程序内部检查系统属性来判断当前运行的JVM是32位还是64位。以下是一个简单的方法: public class JvmBitCheck {public static void main(String[] args) {String arch = System.getProperty("os.arch");String dataM

详细分析Springmvc中的@ModelAttribute基本知识(附Demo)

目录 前言1. 注解用法1.1 方法参数1.2 方法1.3 类 2. 注解场景2.1 表单参数2.2 AJAX请求2.3 文件上传 3. 实战4. 总结 前言 将请求参数绑定到模型对象上,或者在请求处理之前添加模型属性 可以在方法参数、方法或者类上使用 一般适用这几种场景: 表单处理:通过 @ModelAttribute 将表单数据绑定到模型对象上预处理逻辑:在请求处理之前

eclipse运行springboot项目,找不到主类

解决办法尝试了很多种,下载sts压缩包行不通。最后解决办法如图: help--->Eclipse Marketplace--->Popular--->找到Spring Tools 3---->Installed。

JAVA读取MongoDB中的二进制图片并显示在页面上

1:Jsp页面: <td><img src="${ctx}/mongoImg/show"></td> 2:xml配置: <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001

Java面试题:通过实例说明内连接、左外连接和右外连接的区别

在 SQL 中,连接(JOIN)用于在多个表之间组合行。最常用的连接类型是内连接(INNER JOIN)、左外连接(LEFT OUTER JOIN)和右外连接(RIGHT OUTER JOIN)。它们的主要区别在于它们如何处理表之间的匹配和不匹配行。下面是每种连接的详细说明和示例。 表示例 假设有两个表:Customers 和 Orders。 Customers CustomerIDCus

公共筛选组件(二次封装antd)支持代码提示

如果项目是基于antd组件库为基础搭建,可使用此公共筛选组件 使用到的库 npm i antdnpm i lodash-esnpm i @types/lodash-es -D /components/CommonSearch index.tsx import React from 'react';import { Button, Card, Form } from 'antd'