第五章 JavaScript对象及初识面向对象
第五章 JavaScript对象及初识面向对象
一.对象
在JavaScript中,所有事物都是对象,如字符串、数值、数组、函数等。
在JavaScript对象分为内置对象和自定义对象,要处理一些复杂的逻辑时,需要用户自定义对象:
自定义对象语法:var 对象名称=new Object( );
JavaScript的内置对象是一种特殊的数据,常见的内置对象有:
- String(字符串) 对象
- Date(日期)对象
- Array(数组)对象
- Boolean(逻辑)对象
- Math(算数)对象
- RegExp对象
二.构造函数和原型对象
无论是基于Object创建对象,还是使用字面量赋值的方式创建对象,都有一个非常明显的缺点,那就是使用同一个接口需要创建很多对象,这样会产生大量的重复代码。但是构造函数的出现解决了这一问题。
1. 构造函数
构造函数用来创建特定类型的对象,像Object和Array这样的原生构造函数,在运行时会自动出现在执行环境中,此外,也可以创建自定义的构造函数。
例:
声明构造函数:构造函数名称以大写字母开头区分方法
Function Flower(name,genere){
This.name=name;
This.genere=genere;
}
调用:var flower=new Flower(“牡丹”,”芍药科”);
2. 原型对象
在JavaScript中创建的每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象的的用途是包含可以由特定类型的所有实例共享的属性和方法。
Prototype就是通过调用构造函数而创建的那个对象实例的原型对象,使用原型对象的好处就是可以让所有对象实例共享它所有的属性和方法,也就是说不必再构造函数中定义对象实例的信息,可以直接将这些信息直接添加到原型对象中。
例:
/*用原型对象的方法创建人类对象*/
function Persona(){ }
Persona.prototype.name="肥潘";
Persona.prototype.age="38";
Persona.prototype.job="卖猪肉";
Persona.prototype.address="广东深圳平洲";
var person1=new Persona();
var person2=new Persona();
三.继承
1. 原型链
在JavaScript中,每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针(constructor),实例都包含一个指向原型对象的内部指针(_proto_)
要弄清楚原型链就要先弄清楚 function 类型,在javascript中没有类的概念,都是函数,所以它是一门函数式的编程语言。类有一个很重要的特性,就是它可以根据它的构造函数来创建以它为模板的对象。在javascript中,函数就有2个功能
第一、 作为一般函数调用
第二、 作为它原型对象的构造函数
也就new()
我们来看一个例子
[javascript] view plain copy
function a(){
this.name = 'a';
}
当创建一个函数,它会发生什么呢?
第一、它会创建1个函数对象
也就是a 本身
第二、它会创建1个原型对象@a(用@来表示)
第三、函数对象会有一个prototype指针,它指向了对应的原型对象,这里就指向了@a
第四、@a对象中有一个construtor指针,指向它的构造函数,这里就指向了a
这个prototype属性究竟有什么用呢?
其实prototype 属性表示当前函数能够控制的范围(或者说它指明了当前函数是谁的构造函数),这里a就是@a原型对象的构造函数,所以我们会看见有这种写法
[javascript] view plain copy
function a(){
this.name = 'a';
}
var a1 = new a();
这就和其他常见语言相似了,new 就是调用原型对象(通过prototype指针)里面构造函数(constructor)创建一个新的对象实例。
那么修改了prototype指向对象里面的属性,也就影响了所有以它为模板创建的实例,我们可以这样来验证
[javascript] view plain copy
function a(){
this.name = 'a';
}
var a1 = new a();
a.prototype.age = 1;
alert(a1.age);
结果:1
那为什么a1对象可以直接访问到age属性呢?a1对象里面我并没有定义age属性啊,
那是因为所有实例里面都会有一个引用_proto_(在firfox,chrome下可以直接访问,ie不支持)指向了这个原型,这里就是指向了@a,
[javascript] view plain copy
function a(){
this.name = 'a';
}
var a1 = new a();
alert(a1._proto_ == a.prototype)
结果:true
在访问属性的时候,会先在a1对象内部中寻找,如果没有,就会顺着_proto_指向的对象里面去寻找,这里会到@a中寻找,找到就返回值,没有找到就返回undefined,用个成语来形容,就是顺藤摸瓜嘛!
至此原型链的含义就出来了,由于原型对象也有一个_proto_指针,又指向了另一个原型,一个接一个,就形成了原型链。Object.prototype是最顶层的原型,所以如果修改了Object.prototype的属性,那么就影响了所有的对象。
在来看一段代码
[javascript] view plain copy
function a(){
this.name = 'a';
}
function b(){
this.age = 1;
}
b.prototype = new a();
alert(new b().name);
我们显示的将b的原型指向了a的一个实例,然后,b的实例也可以访问a的属性了。这就是javascript的继承了,那为什么b.prototype 指向的是a的一个实例,而不是直接指向a.prototype 呢?
[javascript] view plain copy
b.prototype = new a.prototype;
如果像上面这么写,修改p.prototype中的属性,那么a的原型也会改变了,相当于是子类修改了父类,并且子类和父类的属性糅合在了一起,这显然是不合适的。换句话说,b也成为了@a的构造函数,a,b成了平级的关系。
我们可以下一个定义:
函数a 继承函数b 也就是让函数a成为函数b原型的一个实例的构造函数,构造函数里面声明的属性是函数a自己的,原型实例里面的属性就是继承b的
[javascript] view plain copy
var $ = jQuery = function(selector,context){
//不可能在自己的构造函数中又一次构造自己,所以返回了另外一个构造函数的实例
return new init(selector,context);
}
jQuery.fn = jQuery.prototype = {
size:function(){
return this.length;
}
}
function init (selector,context){
}
init.prototype = jQuery.fn;;
}
这是jquery的一段源码,我们在使用jquery的时候,并没有使用new关键字,那它是如何构造对象的呢?
用上面的知识,可以解释,jquery这里只是一个一般函数的调用,它返回了jquery原型的另外一个构造函数创建的对象,也就是new init()
2.
对象继承
原型链虽然很强大,可以用它来实现继承,但是也存在两个问题。
- 最重要的是来自包含引用类型值的原型,由于包含引用类型值的原型属性会被所有实例共享,在通过原型来实现继承时,原型实际上变成另一个类型的实例,因此原先的实例属性也就变成了现在的原型属性。
- 第二个问题是在创建子类型的实例时,不能向父类型的构造函数中传递参数,其实是没有办法在不影响所有对象实例的情况下,给父类型的构造函数传递参数。
基于这两个原因,实际开发中很少单独使用原型链。因此,开发人员在解决原型中包含引用类型值所带来的问题时,使用了一种叫做借用构造函数(constructor stealing)的技术。
3.
借用构造函数
借用构造函数这种技术的基本思想很简单,就是在子类型构造函数的内部调用父类型构造函数,即在子类型构造函数的内部通过apply()或call()方法调用父类型的构造函数,页可以在将来新创建的对象上执行构造函数。
apply语法:apply([thisObj[,argArray]]);
//应用某一个对象的一个方法,用另一个对象替换当前对象。
call语法:call([thisObj[,arg1[,arg2[,
[,argN]]]]]);
//调用一个对象的一个方法,以另一个对象替换当前对象。
由apply()和call()的语法解释可以看出,它们的用途相同,都是在特定的作用域中调用函数,但是它们接受的参数不同:
apply()接收两个参数,一个是函数运用的作用域(this),另一个是参数数组。
call()方法第一个参数和apply()方法相同,但传递给函数的参数必须列举出来。
借用构造函数还有一个很大的优势,即可以在子类型构造函数中向父类型构造函数传递参数。
如果是仅仅借用构造函数的技术,也将无法避免构造函数模式存在的(方法都在构造函数中定义)问题,因此函数的复用就无从谈起。而且在父类型的原型中定义的方法,对子类而言也是不可见的,结果所有类型都只能使用构造函数模式。基于这些问题,组合继承很好的解决了这些。
4.
组合继承
组合继承(combination inheritance)有时也叫做伪经典继承,指的是将原型链和借用构造函数的技术组合到一块,从而发挥两者之长的一种继承模式。
其思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。
组合继承避免了原型链和借用构造函数的缺陷,融合了它们的优点,称为了JavaScript中最常用的继承模式。
第五章 JavaScript对象及初识面向对象的更多相关文章
- accp8.0转换教材第8章JavaScript对象及初识面向对象理解与练习
JavaScript数据类型,对象,构造函数,原型对象,初识原型链,对象继承 一.单词部分 ①object父类②constructor构造函数③instance实例④call调用 ⑤apply应用⑥c ...
- JQuery制作网页—— 第四章JavaScript对象及初识面向对象
1.对象:在JavaScript中,所有事物都是对象,如字符串.数值.数组.函数等. JavaScript中的基本数据类型: number(数值类型) string(字符串类型) boolean ...
- JavaScript对象及初识面向对象
一.对象 1.1对象是什么 对象是包含相关属性和方法的集合体 1.2什么是面向对象 面向对象仅仅是一个概念或者编程思想 通过一种叫做原型的方式来实现面向对象编程 二.创建对象 2.1自定义对象 2.1 ...
- 第四章 JavaScript对象及初始面向对象
创建对象: //方式一 var ower=new Object(); ower.name="长春花"; ower.genera="夹竹挑科 长春花属"; owe ...
- JAVAScript对象及初始面向对象
javaScript对象及初始面向对象 1:内置对象 例:Date String Array 类等... 2:自定义对象 方法1:var newObj=new Object(); ...
- 学习笔记 第十五章 JavaScript基础
第15章 JavaScript基础 [学习重点] 了解JavaScript基础知识 熟悉常量和变量 能够使用表达式和运算符 正确使用语句 能够掌握数据类型和转换的基本方法 正确使用函数.对象.数组 ...
- 使用jQuery快速高效制作网页交互特效---JavaScript对象及初始面向对象
一.JavaScript中的基本数据类型 number(数值类型) string(字符串类型) boolean(布尔类型) null(空类型) undefined(未定义类型) ...
- JavaScript交互式网页设计 • 【第5章 JavaScript对象】
全部章节 >>>> 本章目录 5.1 Object 对象和 Date 对象 5.1.1 JavaScript 的内部对象 5.1.2 Object对象 5.1.3 Date ...
- 第五章JavaScript
创建数组://1.字面量方式创建 (推荐大家使用这种方式创建数组 简单粗暴) var colors = ['red','color','yellow'];console.log(colors) //空 ...
随机推荐
- oracle 裸设备划分 --centos6.5
主题思想:物理卷PV->卷组VG->逻辑卷LV(类型:raw)->添加表空间 操作过程 vg_orcl 8g 一:划分 二:创建裸设备 方法1:目前最常用的方法 #c ...
- java微信公众号开发token验证失败的问题及解决办法
本文引自http://m.blog.csdn.net/qq_32331997/article/details/72885424 微信公众平台服务器配置时,需要引入token,但是提交的时候总是提示to ...
- docker 使用案例:部署nginx
首先安装docker.可以参考这篇教程: http://www.runoob.com/docker/windows-docker-install.html 本教程以windows10+ubuntu:1 ...
- 1111 WordReplace
#include<iostream> #include<string> using namespace std; int main() { string sa,sb,s; wh ...
- Linux环境下jdk1.8压缩包下载
jdk1.8下载: 百度云链接:https://pan.baidu.com/s/1c37VcPi 密码:e6qh
- delphi简单的分页实现(高手可以不看)
适合初学者,练习几个控件的使用 1.先放一张界面控件布局: 4个button,2个label,1个edit,1个TRzsplitter(把界面分割成上下2部分),1一个adoquery,1个adoco ...
- Spring MVC注解式开发
MVC注解式开发即处理器基于注解的类开发, 对于每一个定义的处理器, 无需在xml中注册. 只需在代码中通过对类与方法的注解, 即可完成注册. 定义处理器 @Controller: 当前类为处理器 @ ...
- 浅析C#之委托、Action、Func
一.委托 1.1 委托的定义 delegate(委托)是一种可用于封装命名方法或匿名方法的引用类型, 委托类似于 C++ 中的函数指针: .Net通过委托来提供回调函数机制. 声明一个委托类型 int ...
- 基于Cesium三维地图项目记录_通视分析功能的实现
实现了剖面分析功能之后,下面来看看如何实现通视分析,还是基本按照之前的思路实现: 了解软件LocaScape是怎么实现的: 网址如下:http://www.locaspace.cn/V3.0/help ...
- svn版本提交冲突问题解决详解
svn冲突文件解决方法 工具/原料 svn客户端 方法/步骤 1 通过SVN客户端更新需要的文件,如果出现有感叹号的文件,找到出现感叹号的文件. 2 选择感叹号文件,即冲突文件,单击鼠标右 ...