浅谈JavaScript的面向对象程序设计(二)
前面介绍通过Object构造函数或者字面量创建单个对象,但是通过这个的方法创建对象有明显的缺点:调用同一个接口创建多个实例,会产生大量的重复代码。怎么样解决?
工厂模式
工厂模式是软件工程领域经常使用的一种设计模式,这种设计模式抽象了创建对象的具体过程。由于在JavaScript中无法使用类,可以使用函数来封装特定接口创建对象。
1 function createPerson(name,age,sex){
2 var obj= new Object();
3 obj.name=name;
4 obj.age=age;
5 obj.sex=sex;
6 obj.getName=function(){
7 return this.name;
8 }
9 }
10 var person1 = createPerson("ge","18","man");
11 var person2 = createPerson("james","18","man");
函数createPerson能够接受参数创建person对象。可以多次调用这个函数,创建拥有同样属性和方法的对象。工厂模式解决了多次创建,代码重复的问题,但是却遇到了对象识别的问题。我们没有办法识别这些对象。
构造函数模式
前面介绍过构造函数可以创建特定类型的对象。对于Object和Array这样的构造函数,在程序运行时,会自动执行在环境中。通过自定义的函数创建属性,可以自己定义属性和方法。
1 var obj={};
2 function Person(name,age,sex){
3 this.name=name;
4 this.age=age;
5 this.sex=sex;
6 this.getName=function(){
7 return this.name;
8 }
9 }
10 var person1 = new Person("ge",18,"man");
11 var person2 = new Person("ha",19,"man");
12 console.log(obj instanceof Person);//false
13 console.log(person1 instanceof Person);//true
14 console.log(person2 instanceof Person);//true
上面的代码,通过字面量创建了一个对象obj。定义一个函数Person,通过this添加了三个属性和一个方法。10行和11行创建了两个person对象,通过instanceof来判断对象的类型。通过上面的代码创建对象,没有调用Object方法,直接将属性和方法赋值给this。
创建Person对象实例,要经历以下过程:创建一个新对象;将构造函数的作用域赋值给新对象;执行构造函数中的代码;返回新对象。
在前面的代码中,person1和person2分别保存这Person对象的不同实例。这两个实例有一个实例属性constructor属性,该属性指向Person
1 console.log(person1.constructor==Person);//true
2 console.log(person2.constructor==Person);//true
构造函数与其他函数的唯一区别,就是调用他们的方式不同。任何函数只要通过new操作符来调用,那它就可以作为构造函数;如果不通过new来调用,那它就是普通函数。
1 var person1 = new Person("ge",18,"man");
2 Person("jiang",18,"man");
3 window.getName();
上面的代码显示了函数的普通调用以及new操作符来调用。如果不通过new操作符调用函数,则属性和方法都会被添加到window中。构造函数创建对象的主要缺点是每个方法在创建对象的时候,是重新创建了一遍。person1和person2都有getName方法,但是这两个方法是不同的函数实例。 1 console.log(person1.getName==person2.getName);//false ,这句代码可以说明getName是不同的函数实例。
1 function Person(name,age,sex){
2 this.name=name;
3 this.age=age;
4 this.sex=sex;
5 this.getName=getName;
6 }
7 function getName(){
8 return this.name;
9 }
上面的代码在Person外部定义的函数getName,在内部通过this指向了外部的方法。但是getName是全局变量,如果全局变量只能给一个函数使用,那这个全局变量实在没有存在的必要。
原型模式
我们创建的每一个函数都有prototype属性,他是一个指针,指向一个对象。这个对象的用途是可以由特定类型的所有实例共享属性和方法。prototype就是通过调用构造函数创建的实例的原型对象。使用原型的优势是可以让所有的对象实例共享属性和方法。不必的在构造函数中定义对象的属性和方法,可以通过原型来创建。
1 function Person(name,age,sex){
2 this.name=name;
3 this.age=age;
4 this.sex=sex;
5 }
6 Person.prototype.getName=function(){
7 return this.name;
8 }
9 var person1 = new Person("haha","ge","man");
10 var person2 = new Person("hehe","dd","man");
11 console.log( person1.getName== person2.getName);//true
上面的代码定义了一个对象Person,通过this方法给对象添加了属性,通过原型给对象添加了方法。并在第九行和第十行新建了对象的两个实例。通过测试,这个两个实例的getName相等,也就是说这两个实例的getName方法指向同一个函数。
- 什么是原型对象
无论什么时候,只要创建了一个函数,JavaScript就会根据特定的规则为函数创建prototype属性,这个属性指向函数的原型对象。默认情况下,这个属性会自动获得一个constructor属性,constructor指向函数指针。Person.prototype.constructor指向Person函数。创建了自定义的函数后,原型对象默认只有一个属性constructor属性;其他属性则是从Object对象继续而来。当调用构造函数创建一个实例后,该实例的内部将包含一个指针,指向构造函数的原型对象。 console.log(Person.prototype.isPrototypeOf(person1)); 通过isPrototypeOf可以确定person1是否是Person.prototype原型对象。 console.log(Object.getPrototypeOf(person1)==Person.prototype); 上面的代码通过Object的getPrototypeOf方法获取实例的原型对象。 1 console.log(Object.getPrototypeOf(person1).getName); 通过该方法获取的是实例的原型对象,并能够获取原型对象拥有的属性和方法。
通过对象实例能够访问保存在原型中的属性值,但是却不能通过对象实例修改原型中的属性值,如果给对象实例添加了一个和原型实例相同名字的属性,则原型中的属性将会被覆盖。
1 function Person(){
2
3 }
4 Person.prototype.Name="haha";
5 Person.prototype.age="19";
6 var person1 = new Person();
7 var person2 = new Person();
8 person1.Name="jordan";
9 console.log(person1.Name);//jordan
10 console.log(person2.Name);//haha
上面的代码,我们定义了一个函数,并为函数通过原型的方法添加了属性name和age。然后通过new 构造函数创建了该对象的两个实例person1和person2。为person1添加了属性name,其实是覆盖了原型中的属性name,通过下面的输出可以确定,person2的输出依然是原型中属性的值。
当为对象实例添加一个属性时候,如果该属性与原型中的属性重名,则会屏蔽原型中的属性。也就是说,添加这个属性会阻止我们访问原型中的属性,并不会修改原型中属性的值。对象的属性检索是从对象本身实例开始,然后再到原型中查找,如果查找到,则不会继续检索。delete操作符可以删除实例中的属性,从而可以继续访问原型属性。
1 function Person(){
2
3 }
4 Person.prototype.Name="haha";
5 Person.prototype.age="19";
6 var person1 = new Person();
7 var person2 = new Person();
8 person1.Name="jordan";
9 console.log(person1.Name);//jordan
10 delete person1.Name;
11 console.log(person1.Name);//haha
上面的代码,我们使用delete操作符删除了person1实例中的属性Name,但是我们通过person1Name访问到的就是原型对象的属性。可以通过hasOwnProperty方法来判断属性是在实例中,还是在对象中。该方法继承于Object中。
1 function Person(){
2 this.sex="man";
3 }
4 Person.prototype.Name="haha";
5 Person.prototype.age="19";
6 var person1 = new Person();
7 var person2 = new Person();
8 person1.Name="jordan";
9 console.log(person1.hasOwnProperty("Name"));//true
10 console.log(person1.Name);//jordan
11 delete person1.Name;
12 console.log(person1.hasOwnProperty("Name"));//false
13 console.log(person1.Name);//haha
上面的代码通过hasOwnProperty方法判断了name属性是属于原型还是属于实例。
1 function Person(){
2
3 }
4 Person.prototype.Name="haha";
5 Person.prototype.age="19";
6 var person1 = new Person();
7 for(key in person1){
8 console.log(key);
9 }
通过for-in循环能够获取到实例的原型属性以及方法。当然也可以通过in来判断实例是否拥有属性。 console.log("Name" in person1); 通过in操作符合方法hasOwnProperty能够确认属性是存在于对象中还是原型中。in操作符无论是对象中属性还是原型中属性都返回true,hasOwnProperty只有存在于实例中才返回true。
1 //true,实例中属性
2 //false,原型中属性
3 function hasOwnProperty(obj,name){
4 return obj.hasOwnProperty(name)&&(name in obj);
5 }
要获取对象上所有可以枚举的属性,可以通过Object.keys方法,返回字符串组成的数组。 1 var keys = Object.keys(Person.prototype); 2 console.log(keys.toString());//Name,age 。Object.keys方法获取了Person中可以枚举的属性。
1 var allkeys=Object.getOwnPropertyNames(Person.prototype);
2 console.log(allkeys.toString());//constructor,Name,age
通过Object.getOwnPropertyNames能够获取所有的属性,包括不可枚举的属性。
- 原型的动态性
在原型中的修改是一次搜索,我们对原型的修改,会立即从实例上反映出来。即使是先创建实例,再修改原型,也可以。
1 function Person(){
2
3 }
4 var person1 = new Person();
5 Person.prototype.getName=function(){
6 return "hehe";
7 }
8 console.log(person1.getName());//hehe
上面的代码定义了函数,并为对象创建了实例。在实例化之后,我们在原型中添加了属性getName,但是我们依然能够访问该原型。当我们在person1中调用getName时,首先在实例中搜索,如果搜索不到,则到原型中进行检索。原型与实例之间的连接是一个指针,因此可以在原型中找到getName属性。但是如果我们重写了原型对象,则无法访问到属性。实例中的指针仅仅指向原型,但是无法指向构造函数。
1 function Person(){
2
3 }
4
5 var person1 = new Person();
6 Person.prototype={
7 getName:function(){return "hehe"}
8 };
9 var person2 = new Person();
10 console.log(person2.getName());//hehe
11 console.log(person1.getName());//报错
上面的代码就显示了重写原型对象后,person1已经无法调用到原型的属性和方法了。但是peprson2可以调用到。
- 原生对象的原型
JavaScript中的引用类型都采用了原型模式。原生引用类型(Array、String、和Object)都在构造函数的原型上定义了方法。比如在String的原型用有toString()方法。
1 console.log(typeof String.prototype.toString);//function 。同时我们还可以为原生引用类型添加新的方法。比如我们为String添加getString方法。
1 String.prototype.getString=function(){
2 return this.toString().trim();
3 }
4 var str=" wo ";
5 console.log(str.getString());//wo
上面的代码,我们为String的原型添加了getString 方法,该方法调用了toString方法和trim方法。
- 深度学习及AR在移动端打车场景下的应用
- R案例操作:RQDA和tm包结合进行文本挖掘
- 用Vue.js开发微信小程序:开源框架mpvue解析
- 分类模型的性能评估——以SAS Logistic回归为例: 混淆矩阵
- R语言,你要怎样画地图?
- R语言绘制中国地图,并展示流行病学数据
- 使用R语言构造投资组合
- R语言构建追涨杀跌量化交易模型
- 美团点评境外度假团队前端项目开发实践总结
- 在jfinal中使用druid,并配置查看权限
- java中遇到过的String的一些特性
- Kaggle案例——使用scikit-learn解决DigitRecognition问题
- 基于Kaggle数据的词袋模型文本分类教程
- javascript中遇到的字符串对象处理
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CodeForces - 224C. Bracket Sequence (栈模拟)简单做法
- XLOG段文件跳号现象分析
- codeforce 227E 矩阵快速幂求斐波那契+N个连续数求最大公约数+斐波那契数列的性质
- 疯子的算法总结(五) 矩阵乘法 (矩阵快速幂)
- codeforce 227D Naughty Stone Piles (贪心+递归+递推)
- POJ3614防晒霜 这个贪心有点东西(贪心+优先队列)
- 环形均分纸牌问题(中位数)
- POJ 1176 Party Lamps&& USACO 2.2 派对灯(搜索)
- P1522 牛的旅行 Cow Tours(floyd)
- P1468 派对灯 Party Lamps(BIG 模拟)
- 【JVM系统学习之路系列】 JVM 概述篇
- P1518 两只塔姆沃斯牛 The Tamworth Two(简单的搜索题)
- P1466 集合 Subset Sums 搜索+递推+背包三种做法
- P1465 序言页码 Preface Numbering (手推)
- P1460 健康的荷斯坦奶牛 Healthy Holsteins (简单的dfs)