JS面向对象编程之封装
来源:https://segmentfault.com/a/1190000015843072
我们所熟知的面向对象语言如 C++、Java 都有类的的概念,类是实例的类型模板,比如Student
表示学生这种类型,而不表示任何具体的某个学生,而实例就是根据这个类型创建的一个具体的对象,比如zhangsan
、lisi
,由类生成对象体现了抽象模板到具体化的过程,这叫做基于类的面向对象方式,而 JavaScript 没有类的概念,是基于原型的面向对象方式(虽然 Es6 增加了 class
,实质是对原型方式的封装)。总结起来就是以下两点:
- 在基于类的面向对象方式中,对象(object)依靠类(class)来产生。
- 在基于原型的面向对象方式中,对象(object)则是依靠构造函数(constructor)和原型(prototype)构造出来的。
面向对象语言的第一个特性毫无疑问是封装,在 JS 中,封装的过程就是把一些属性和方法放到对象中“包裹”起来,那么我们要怎么去封装属性和方法,或者说怎么去创建对象呢(后文统一说创建对象)?下面用逐步推进的方式阐述:
对象字面量 --> 工厂模式 --> 构造函数 --> 原型模式 --> 构造函数+原型模式
对象字面量
JS中创建对象最原始的方式有两种:
function Person(name, age) {
this.name = name;
this.age = age;
this.greeting = function() {
alert('Hi!');
};
// return this;
}
var person1 = new Person("leon", "20");
var person2 = new Person("jack", "21");
- 对象字面量
var person = {
name: "leon",
age: "20",
greeting: function() {
alert('Hi!');
}
}
- 为
Object
实例添加属性方法
var person = new Object();
person.name = "leon";
person.age = "20";
person.greeting = function() {
alert('Hi!');
};
- 优点:代码简单
- 缺点: 创建多个对象会产生大量的代码,编写麻烦,且并没有实例与原型的概念。
- 解决办法:工厂模式。
工厂模式
工厂模式是编程领域一种广为人知的设计模式,它抽象了创建具体对象的过程。JS 中创建一个函数,把创建新对象、添加对象属性、返回对象的过程放到这个函数中,用户只需调用函数来生成对象而无需关注对象创建细节,这叫工厂模式:
function createPerson(name, age) {
var person = new Object();
person.name = name;
person.age = age;
person.greeting = function() {
alert('Hi!');
};
return person;
}
var person1 = createPerson("leon", "20");
- 优点:工厂模式解决了对象字面量创建对象代码重复问题,创建相似对象可以使用同一API。
- 缺点:因为是调用函创建对象,无法识别对象的类型。
- 解决办法:构造函数
构造函数
JS 中构造函数与其他函数的唯一区别,就在于调用它的方式不同。任何函数,只要通过new
操作符来调用,那它就可以作为构造函数。来看下面的例子:
function Person(name, age) {
this.name = name;
this.age = age;
this.greeting = function() {
alert('Hi!');
};
// return this;
}
var person1 = new Person("leon", "20");
var person2 = new Person("jack", "21");
通过构造函数new
一个实例经历了四步:
- 创建一个新对象;
- 将构造函数内的
this
绑定到新对象上; - 为新对象添加属性和方法;
- 返回新对象(JS 引擎会默认添加
return this;
)。
而通过构造函数创建的对象都有一个constructor
属性,它是一个指向构造函数本身的指针,因此就可以检测对象的类型啦。:
alert(person1.constructor === Person) //true
alert(person1 instanceof Person) // true
但是仍然存在问题:
alert(person1.greeting == person2.greeting) //false
同一个构造函数中定义了greeting()
,而不同实例上的同名函数却是不相等的,意味着这两个同名函数的内存空间不一致,也就是构造函数中的方法要在每个实例上重新创建一次。这显然是不划算的。
- 优点:解决了类似对象创建问题,且可以检测对象类型。
- 缺点:构造函数方法要在每个实例上新建一次。
- 解决办法:原型模式。
原型模式
终于讲到了原型模式,JS 中每个构造函数都有一个prototype
属性,这个属性是一个指针,指向原型对象,而这个原型对象包含了这个构造函数所有实例共享的属性和方法。而实例对象中有一个proto
属性,它指向原型对象,也就是构造函数.prototype == 原型对象 == 对象._proto_
,那么对象就可以获取到原型对象中的属性和方法啦。同时,所有对象中都有一个constructor
属性,原型对象的constructor
指向其对应的构造函数。
使用原型,就意味着我们可以把希望实例共享的属性和方法放到原型对象中去,而不是放在构造函数中,这样每一次通过构造函数new
一个实例,原型对象中定义的方法都不会重新创建一次。来看下面的例子:
function Person() {
}
Person.prototype.name = "leon";
Person.prototype.age = "20";
Person.prototype.greeting = function() {
alert('Hi!');
};
var person1 = new Person();
var person2 = new Person();
alert(person1.name); //"leon"
alert(person2.name); //"leon"
alert(person1.greeting == person2.greeting); //true
- 优点:与单纯使用构造函数不一样,原型对象中的方法不会在实例中重新创建一次,节约内存。
- 缺点:使用空构造函数,实例 person1 和 person2 的
name
都一样了,我们显然不希望所有实例属性方法都一样,它们还是要有自己独有的属性方法。并且如果原型中对象中有引用类型值,实例中获得的都是该值的引用,意味着一个实例修改了这个值,其他实例中的值都会相应改变。 - 解决办法:构造函数+原型模式组合使用。
另外 JS 中还定义了一些与原型相关的属性,这里罗列一下:
Object.getPrototypeOf()
,取得实例的原型对象。
Object.getPrototypeOf(person1);
isPrototypeOf()
,判断是不是一个实例的原型对象。
Person.prototype.isPrototypeOf(person1);
hasOwnProperty()
,检测一个属性是否存在于实例中
person1.hasOwnProperty("name");
in
,判断一个属性是否存在于实例和原型中。
"name" in person1;
构造函数+原型模式
最后一种方式就是组合使用构造函数和原型模式,构造函数用于定义实例属性,而共享属性和方法定义在原型对象中。这样每个实例都有自己独有的属性,同时又有对共享方法的引用,节省内存。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype = {
constructor: Person,
nationality: "China",
greeting: function() {
alert(this.name);
}
}
var person1 = new Person("leon", "20");
var person2 = new Person("jack", "21");
alert(person1.greeting == person2.greeting) //true
上面代码中用对象字面量的形式重写了原型对象,这样相当于创建了一个新的对象,那么它的constructor
属性就会指向Object
,这里为了让它继续指向构造函数,显示的写上了constructor: Person
这种构造函数与原型模式混成的模式,是目前在 JS 中使用最为广泛的一种创建对象的方法。
我们所熟知的面向对象语言如 C++、Java 都有类的的概念,类是实例的类型模板,比如Student
表示学生这种类型,而不表示任何具体的某个学生,而实例就是根据这个类型创建的一个具体的对象,比如zhangsan
、lisi
,由类生成对象体现了抽象模板到具体化的过程,这叫做基于类的面向对象方式,而 JavaScript 没有类的概念,是基于原型的面向对象方式(虽然 Es6 增加了 class
,实质是对原型方式的封装)。总结起来就是以下两点:
- 在基于类的面向对象方式中,对象(object)依靠类(class)来产生。
- 在基于原型的面向对象方式中,对象(object)则是依靠构造函数(constructor)和原型(prototype)构造出来的。
面向对象语言的第一个特性毫无疑问是封装,在 JS 中,封装的过程就是把一些属性和方法放到对象中“包裹”起来,那么我们要怎么去封装属性和方法,或者说怎么去创建对象呢(后文统一说创建对象)?下面用逐步推进的方式阐述:
对象字面量 --> 工厂模式 --> 构造函数 --> 原型模式 --> 构造函数+原型模式
对象字面量
JS中创建对象最原始的方式有两种:
- 对象字面量
var person = {
name: "leon",
age: "20",
greeting: function() {
alert('Hi!');
}
}
- 为
Object
实例添加属性方法
var person = new Object();
person.name = "leon";
person.age = "20";
person.greeting = function() {
alert('Hi!');
};
- 优点:代码简单
- 缺点: 创建多个对象会产生大量的代码,编写麻烦,且并没有实例与原型的概念。
- 解决办法:工厂模式。
工厂模式
工厂模式是编程领域一种广为人知的设计模式,它抽象了创建具体对象的过程。JS 中创建一个函数,把创建新对象、添加对象属性、返回对象的过程放到这个函数中,用户只需调用函数来生成对象而无需关注对象创建细节,这叫工厂模式:
function createPerson(name, age) {
var person = new Object();
person.name = name;
person.age = age;
person.greeting = function() {
alert('Hi!');
};
return person;
}
var person1 = createPerson("leon", "20");
- 优点:工厂模式解决了对象字面量创建对象代码重复问题,创建相似对象可以使用同一API。
- 缺点:因为是调用函创建对象,无法识别对象的类型。
- 解决办法:构造函数
构造函数
JS 中构造函数与其他函数的唯一区别,就在于调用它的方式不同。任何函数,只要通过new
操作符来调用,那它就可以作为构造函数。来看下面的例子:
function Person(name, age) {
this.name = name;
this.age = age;
this.greeting = function() {
alert('Hi!');
};
// return this;
}
var person1 = new Person("leon", "20");
var person2 = new Person("jack", "21");
通过构造函数new
一个实例经历了四步:
- 创建一个新对象;
- 将构造函数内的
this
绑定到新对象上; - 为新对象添加属性和方法;
- 返回新对象(JS 引擎会默认添加
return this;
)。
而通过构造函数创建的对象都有一个constructor
属性,它是一个指向构造函数本身的指针,因此就可以检测对象的类型啦。:
alert(person1.constructor === Person) //true
alert(person1 instanceof Person) // true
但是仍然存在问题:
alert(person1.greeting == person2.greeting) //false
同一个构造函数中定义了greeting()
,而不同实例上的同名函数却是不相等的,意味着这两个同名函数的内存空间不一致,也就是构造函数中的方法要在每个实例上重新创建一次。这显然是不划算的。
- 优点:解决了类似对象创建问题,且可以检测对象类型。
- 缺点:构造函数方法要在每个实例上新建一次。
- 解决办法:原型模式。
原型模式
终于讲到了原型模式,JS 中每个构造函数都有一个prototype
属性,这个属性是一个指针,指向原型对象,而这个原型对象包含了这个构造函数所有实例共享的属性和方法。而实例对象中有一个proto
属性,它指向原型对象,也就是构造函数.prototype == 原型对象 == 对象._proto_
,那么对象就可以获取到原型对象中的属性和方法啦。同时,所有对象中都有一个constructor
属性,原型对象的constructor
指向其对应的构造函数。
使用原型,就意味着我们可以把希望实例共享的属性和方法放到原型对象中去,而不是放在构造函数中,这样每一次通过构造函数new
一个实例,原型对象中定义的方法都不会重新创建一次。来看下面的例子:
function Person() {
}
Person.prototype.name = "leon";
Person.prototype.age = "20";
Person.prototype.greeting = function() {
alert('Hi!');
};
var person1 = new Person();
var person2 = new Person();
alert(person1.name); //"leon"
alert(person2.name); //"leon"
alert(person1.greeting == person2.greeting); //true
- 优点:与单纯使用构造函数不一样,原型对象中的方法不会在实例中重新创建一次,节约内存。
- 缺点:使用空构造函数,实例 person1 和 person2 的
name
都一样了,我们显然不希望所有实例属性方法都一样,它们还是要有自己独有的属性方法。并且如果原型中对象中有引用类型值,实例中获得的都是该值的引用,意味着一个实例修改了这个值,其他实例中的值都会相应改变。 - 解决办法:构造函数+原型模式组合使用。
另外 JS 中还定义了一些与原型相关的属性,这里罗列一下:
Object.getPrototypeOf()
,取得实例的原型对象。
Object.getPrototypeOf(person1);
isPrototypeOf()
,判断是不是一个实例的原型对象。
Person.prototype.isPrototypeOf(person1);
hasOwnProperty()
,检测一个属性是否存在于实例中
person1.hasOwnProperty("name");
in
,判断一个属性是否存在于实例和原型中。
"name" in person1;
构造函数+原型模式
最后一种方式就是组合使用构造函数和原型模式,构造函数用于定义实例属性,而共享属性和方法定义在原型对象中。这样每个实例都有自己独有的属性,同时又有对共享方法的引用,节省内存。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype = {
constructor: Person,
nationality: "China",
greeting: function() {
alert(this.name);
}
}
var person1 = new Person("leon", "20");
var person2 = new Person("jack", "21");
alert(person1.greeting == person2.greeting) //true
上面代码中用对象字面量的形式重写了原型对象,这样相当于创建了一个新的对象,那么它的constructor
属性就会指向Object
,这里为了让它继续指向构造函数,显示的写上了constructor: Person
这种构造函数与原型模式混成的模式,是目前在 JS 中使用最为广泛的一种创建对象的方法。
个人理解:
//个性化属性
function Person(code_id, link, selector) {
this.code_id = code_id;
this.link = link;
this.selector = selector;
} //公共属性(写法一)
function setWidth(w) {
Person.prototype.w = w;
} function setHeight(h) {
Person.prototype.h = h;
} //公共属性(写法二,只能用一次)
Person.prototype = {
constructor: Person,
nationality: "China",
greeting: function() {
alert(this.name);
}
}
意味着这两个同名函数的内存空间一致,也就是构造函数中的方法要在每个实例上没有重新创建一次。
JS面向对象编程之封装的更多相关文章
- python基础-面向对象编程之封装、访问限制机制和property
面向对象编程之封装 封装 定义:将属性和方法一股脑的封装到对象中,使对象可通过"对象."的方式获取或存储数据. 作用:让对象有了"."的机制,存取数据更加方便 ...
- JS面向对象编程之:封装、继承、多态
最近在实习公司写代码,被隔壁的哥们吐槽说,代码写的没有一点艺术.为了让我的代码多点艺术,我就重新温故了<javascript高级程序设计>(其中几章),然后又看了<javascrip ...
- JS面向对象编程之对象(简化版)
上次网上看了一篇这个文章,然后乱七八糟晕头转向把我晕的够呛.看了半天没找到错的地方但是浏览器Hello world就是没有定义...我也是醉了,最后发现我认为是废话的话一句话竟然有用!!!所以我还是简 ...
- java学习笔记(基础篇)—面向对象编程之封装、继承、多态
一. OOP中的基本概念 Java的编程语言是面向对象的,采用这种语言进行编程称为面向对象编程(Object-Oriented Programming, OOP), 它允许设计者将面向对象设计实现为一 ...
- JS面向对象编程之对象
在AJAX兴起以前,很多人写JS可以说都是毫无章法可言的,基本上是想到什么就写什么,就是一个接一个的函数function,遇到重复的还得copy,如果一不小心函数重名了,还真不知道从何开始查找错误,因 ...
- Python 面向对象编程之封装的艺术
1. 面向对象编程 OOP ( Object Oriented Programming) 即面向对象编程. 面向对象编程是一种编码思想,或是一种代码组织方式.如同编辑文章时,可以选择分段.分节的方式 ...
- 深入理解JavaScript系列(17):面向对象编程之概论
介绍 在本篇文章,我们考虑在ECMAScript中的面向对象编程的各个方面(虽然以前在许多文章中已经讨论过这个话题).我们将更多地从理论方面看这些问题. 特别是,我们会考虑对象的创建算法,对象(包括基 ...
- PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
这篇文章主要介绍了PHP面向对象编程之深入理解方法重载与方法覆盖(多态)的相关资料,需要的朋友可以参考下: 什么是多态? 多态(Polymorphism)按字面的意思就是"多种状态" ...
- JS类的封装及实现代码
js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类. 1. ...
随机推荐
- 20175314 实验四 Android开发基础
20175314 实验四 Android开发基础 一.实验报告封面 课程:Java程序设计 班级:1753班 姓名:薛勐 学号:20175314 指导教师:娄嘉鹏 实验日期:2019年5月17日 实验 ...
- 牛客寒假基础集训营 | Day1 J题—u's的影响力(水题)
Day1 J题-u's的影响力 有一天,kotori发现了一个和lovelive相似的游戏:bangdream.令她惊讶的是,这个游戏和lovelive居然是同一个公司出的! kotori经过一段时间 ...
- 悟懂MapReduce,不纠结!
在<谷歌 MapReduce 初探>中,我们通过统计词频的 WordCount 经典案例,对 Google 推出的 MapReduce 编程模型有了一个认识,但是那种认识,还只是停留在知道 ...
- CentOS7系统下配置nginx及https安全站点
本文主要演示在CentOS7系统下OpenSSL的使用方式,以及Nginx在测centOS下的证书配置方式 注意:生成服务器端证书时必须在CN字段中如实输入站点的访问地址 ,如果是域名就写域名,ip访 ...
- Socket探索1-两种Socket服务端实现
介绍 一次简单的Socket探索之旅,分别对Socket服务端的两种方式进行了测试和解析. CommonSocket 代码实现 实现一个简单的Socket服务,基本功能就是接收消息然后加上结束消息时间 ...
- JAVABEAN的SCOPE属性(转载)
对于JSP 程序而言,使用JavaBeans 组件不仅可以封装许多信息,而且还可以将一些 数据处理的逻辑隐藏到JavaBeans 的内部,除此之外,我们还可以设定JavaBeans 的Scope ...
- MyBatis(十):Mybatis缓存的重要内容
本文是按照狂神说的教学视频学习的笔记,强力推荐,教学深入浅出一遍就懂!b站搜索狂神说或点击下面链接 https://space.bilibili.com/95256449?spm_id_from=33 ...
- 曹工说Redis源码(4)-- 通过redis server源码来理解 listen 函数中的 backlog 参数
文章导航 Redis源码系列的初衷,是帮助我们更好地理解Redis,更懂Redis,而怎么才能懂,光看是不够的,建议跟着下面的这一篇,把环境搭建起来,后续可以自己阅读源码,或者跟着我这边一起阅读.由于 ...
- python socket简介
一.socket是什么 socket是应用层与TCP/IP协议通信的中间软件抽象层,它是一组接口.在设计模式中,socket其实就是一个门面模式,它把复杂的TCP/IP协议隐藏在socket接口后面, ...
- 插入排序(C语言版)
#include<iostream>using namespace std;int n;void lan(int a[],int size){ for(int i = 0;i < s ...