一、澄清概念

  1.JS中"基于对象=面向对象"

  2.JS中没有类(Class),但是它取了一个新的名字叫“原型对象”,因此"类=原型对象"

二、类(原型对象)和对象(实例)的区别与联系

  1.类(原型对象)是抽象,是概念的,代表一类事物。

  2.对象是具体的,实际的,代表一个具体的事物。

  3.类(原型对象)是对象实例的模板,对象实例是类的一个个体。

三、抽象的定义

  在定义一个类时,实际上就是把一类事物的共有属性和行为提取出来,形成一个物理模型(模板),这种研究问题的方法称为抽象。

四、JavaScript面向对象三大特征

  4.1.封装

  封装就是把抽象出来的属性和对属性的操作封装在一起,属性被保护在内部,程序的其它部分只有通过被授权的操作(函数),才能对属性进行操作!

封装的范例:

 1 <script type="text/javascript">
2 /*定义一个Person类*/
3 function Person(_name,_age,_salary){
4 //Person类的公开属性,类的公开属性的定义方式是:”this.属性名“
5 this.Name=_name;
6 //Person类的私有属性,类的私有属性的定义方式是:”var 属性名“
7 var Age=_age;
8 var Salary=_salary;
9
10 //定义Person类的公开方法(特权方法),类的公开方法的定义方式是:”this.functionName=function(){.....}“
11 this.Show=function(){
12 alert("Age="+Age+"\t"+"Salary="+Salary);//在公开方法里面访问类的私有属性是允许的
13 }
14 /*
15 定义Person类的私有方法(内部方法),
16 类的私有方法的定义方式是:”function functionName(){.....}“,
17 或者 var functionName=function(){....}
18 */
19 function privateFn(){
20 alert("我是Person类的私有函数privateFn");
21 }
22
23 var privateFn2=function(){
24 alert("我是Person类的私有函数privateFn2");
25 }
26 }
27 /*通过prototype给可以类的所有对象添加公共(public)方法,
28 但是这种方式定义的方法不能去访问类的私有属性和私有方法*/
29 Person.prototype.Fn=function(){
30 alert("访问公共属性this.Name="+this.Name);//访问公共属性,OK的
31 //alert("访问私有属性Aag="+Age);//访问私有属性,这里会报错“Age未定义”
32 //privateFn();//调用私有方法,这里会报错“缺少对象”
33
34 }
35
36 var p1 = new Person("孤傲苍狼",24,2300);
37 alert("p1.Name="+p1.Name);//访问公有属性,这是可以正常访问的
38 alert("p1.Age="+p1.Age+"\t"+"p1.Salary="+p1.Salary);//不能使用类的对象去直接访问类私有属性,这是访问不了的,结果都是undefined
39 p1.Show();//调用类的公共函数,这次允许的
40 p1.Fn();//调用类的公共函数,这次允许的
41 //alert("p1.privateFn():"+p1.privateFn()+"&nbsp;p1.privateFn2():"+p1.privateFn2());//不能使用类的对象去调用类的私有方法,这里会报错”对象不支持此属性或者方法“
42 </script>

  4.2.继承

继承范例:

 1 <script type="text/javascript">
2 /*定义Stu类*/
3 function Stu(name,age){
4 this.Name=name;
5 this.Age=age;
6 this.Show=function(){
7 window.alert("我的名字是:"+this.Name+",今年:"+this.Age);
8 }
9 this.SayHello = function(){
10 window.alert("Hello,"+this.Name);
11 }
12 }
13
14 /*定义MidStu类*/
15 function MidStu(name,age){
16 this.stu=Stu;//MidStu类继承Stu类
17 this.stu(name,age);//JS中实际上是通过对象冒充来实现继承的,这句话不能少,因为JS是动态语言,如果不执行,则不能实现继承效果
18 /*
19 从父类继承下来的公共方法,可以根据实际情况选择重写
20 */
21 //在子类MidStu中重写父类Stu的Show方法
22 /*this.Show=function(){
23 alert("MidStu.Show()");
24 }*/
25 //在子类MidStu中重写父类Stu的SayHello方法
26 this.SayHello=function(){
27 alert("你好,"+this.Name);
28 }
29
30 }
31
32 var midStu = new MidStu("孤傲苍狼",24);//创建一个MidStu类实例对象
33 alert("访问继承下来的属性Name和Age,midStu.Name="+midStu.Name+",midStu.Name="+midStu.Age);//访问继承下来的属性
34 midStu.Show();//调用从父类Stu继承下来的Show方法
35 midStu.SayHello();//调用从父类Stu继承下来的SayHello方法,SayHello()在子类中进行了重写,这里调用的是重写过后的SayHello()方法
36 </script>

运行结果:

4.3.多态

  所谓多态,就是指一个引用在不同情况下的多种状态,在Java中多态是指通过指向父类的引用,来调用不同子类中实现的方法。

  JS实际上是无态的,是一种动态语言,一个变量的类型是在运行过程中由JS引擎决定的,所以说,JS天然支持多态。

五、JavaScript自定义类(原型对象)的方式

  5.1.工厂方法——使用new Object创建对象并添加相关属性

 1     //通过Object直接创建对象
2 //var p1 = new Object();//创建一个Object对象
3 var p1 = {};//创建一个Object对象,简写
4 //动态增加属性、方法
5 p1.Name = "孤傲苍狼";
6 p1.Age = 24;
7 p1.SayHello = function() { alert("hello,"+p1.Name); };
8 p1.SayHello();
9 for(var propertyName in p1) {//对象的成员都是对象的key
10 alert(propertyName);
11 }

  5.2.使用构造函数来定义类(原型对象)

基本语法:
 1 function 类名(){
2 this.属性名;//公共属性
3 var 属性名;//私有属性
4 /*凡是定义类的公共属性和公共方法都要使用this*/
5 //定义类的公共函数
6 this.函数名=function(){
7
8 }
9 //定义类的私有函数
10 function 函数名(){
11
12 }
13 }

范例:

 1 /*定义一个猫类,这种就是使用构造函数来定义类(原型对象)*/
2 function Cat(){
3 this.Name="catName";//public属性
4 this.Age;//public属性
5 this.Color;//public属性
6 var weight=2;//private属性,只能在Cat类内部使用,Cat类的对象无法访问这个私有属性
7 //public方法
8 this.publicFunction = function(){
9 alert(weight);
10 alert("猫叫...");
11 }
12 //private方法,只能在Cat类内部使用,Cat类的对象无法访问这个私有方法
13 var privateFunction = function(){
14 alert("私有方法");
15 }
16
17
18 }
19 //如果这样用,那么就当成函数来使用
20 Cat();
21 //如果这样用,那么就当成类来使用
22 var cat1 = new Cat();
23 //cat1就是一个对象(实例)
24 alert(cat1.Name);//访问公共属性,弹出默认值catName
25 cat1.Name="TomCat";//访问公共属性
26 cat1.Age=3;//访问公共属性
27 cat1.Color="白色";//访问公共属性
28 alert(cat1.weight);//访问私有属性,无法访问,弹出undefined
29 alert(cat1.Name+"\t"+cat1.Age+"\t"+cat1.Color);//访问对象的属性方式1:对象名.属性名
30 alert(cat1["Name"]+"\t"+cat1["Age"]+"\t"+cat1["Color"]);//访问对象的属性方式2:对象名["属性名"]
31 cat1.publicFunction();//调用public方法
32 cat1.privateFunction();//调用private方法,报错:对象不支持此属性或方法
33 for(var property in cat1){
34 document.writeln(property+"\t");
35 }

JS中一切都是对象,类(原型对象)其实也是对象,它实际上是Function类的一个实例

 1 document.write("<pre>");
2 function Person(){
3
4 }
5 /*Person.constructor得到的Person类的构造函数如下:
6 function Function() {
7 [native code]
8 }
9 */
10 document.writeln("Person.constructor:"+Person.constructor);//Person类的构造函数
11 document.writeln("Person:"+Person);
12 var p1 = new Person();
13 document.writeln("p1.constructor:"+p1.constructor);//”p1.constructor“是得到p1实例的构造函数
14 //如何判断某个对象是不是某个类型,采用如下两种方式
15 if(p1 instanceof Person){
16 document.writeln("p1 is Person ok1");
17 }
18 if(p1.constructor==Person){
19 document.writeln("p1 is Person ok2");
20 }
21
22 var num1=123;
23 document.writeln("num1.constructor:"+num1.constructor);
24
25 var str1="abc";
26 document.writeln("str1.constructor:"+str1.constructor);
27 document.write("</pre>")

运行结果:

Person.constructor:
function Function() {
[native code]
} Person:function Person(){ }
p1.constructor:function Person(){ }
p1 is Person ok1
p1 is Person ok2
num1.constructor:
function Number() {
[native code]
} str1.constructor:
function String() {
[native code]
}

JavaScript学习总结(5)——Javascript面向(基于)对象编程的更多相关文章

  1. JavaScript学习总结(九)——Javascript面向(基于)对象编程

    一.澄清概念 1.JS中"基于对象=面向对象" 2.JS中没有类(Class),但是它取了一个新的名字叫“原型对象”,因此"类=原型对象" 二.类(原型对象)和 ...

  2. js面向(基于)对象编程—类(原型对象)与对象

    JS分三个部分: 1. ECMAScript标准--基础语法 2. DOM  Document Object Model 文档对象模型 3. BOM  Browser Object Moldel 浏览 ...

  3. JS面向(基于)对象编程--三大特征

    抽象 在讲解面向对象编程的三大特征前,我们先了解什么叫抽象,在定义一个类时候,实际上就是把一类事物的共有的属性和行为提取出来,形成一个物理模型(模板).这种研究问题的方法称为抽象. 封装 什么是封装? ...

  4. JS面向(基于)对象编程--构造方法(函数)

    构造函数(方法)介绍 什么是构造函数呢?在回答这个问题之前,我们来看一个需求:前面我们在创建人类的对象时,是先把一个对象创建好后,再给他的年龄和姓名属性赋值,如果现在我要求,在创建人类的对象时,就直接 ...

  5. JavaScript基于对象编程

    js面向对象特征介绍 javascript是一种面向(基于)对象的动态脚本语言,是一种基于对象(Object)和事件驱动(EventDirven)并具有安全性能的脚本语言.它具有面向对象语言所特有的各 ...

  6. JavaScript学习09 函数本质及Function对象深入探索

    JavaScript学习09 函数本质及Function对象深入探索 在JavaScript中,函数function就是对象. JS中没有方法重载 在JavaScript中,没有方法(函数)重载的概念 ...

  7. JavaScript学习(1)之JavaScript基础

    JavaScript学习(1)之JavaScript基础 由于工作原因,开发语言逐渐以JavaScript为主,所以,抽空学习了下JavaScript语法.等现阶段的工作稳定之后,陆续会分享下自己在学 ...

  8. 《Essential C++》读书笔记 之 基于对象编程风格

    <Essential C++>读书笔记 之 基于对象编程风格 2014-07-13 4.1 如何实现一个class 4.2 什么是Constructors(构造函数)和Destructor ...

  9. 我的javascript学习之路(一)对象之基础

    做了2个多月的ajax项目,对js的学习觉得了深入了不少,把自己的一些学习的经验贴出来,希望对初学者有所帮助,也希望大家能指出我的错误之处或者不当之处. javascript 是基于对象的语言,为什么 ...

随机推荐

  1. PHP长整型在32位系统中强制转化溢出

    CleverCode近期遇到一个PHP项目整形转化问题,mysql有一个字段id是bigint的,里面有长整型,如id = 5147486396.可是php代码因为历史原因却部署在多台机器中,当中A机 ...

  2. JAVA并发-为现有的线程安全类添加原子方法

    JAVA中有许多线程安全的基础模块类,一般情况下,这些基础模块类能满足我们需要的所有操作,但更多时候,他们并不能满足我们所有的需要.此时,我们需要想办法在不破坏已有的线程安全类的基础上添加一个新的原子 ...

  3. 巧用FPGA中资源

    随着FPGA的广泛应用,所含的资源也越来越丰富,从基本的逻辑单元.DSP资源和RAM块,甚至CPU硬核都能集成在一块芯片中.在做FPGA设计时,如果针对FPGA中资源进行HDL代码编写,对设计的资源利 ...

  4. libsvm 的使用

    1. libsvm 支持的SVM模型 官网地址:LIBSVM – A Library for Support Vector Machines libsvm 支持的 SVM 模型如下(C:classif ...

  5. HDU 5371 Hotaru's problem Manacher+尺取法

    题意:给你一个序列,求最长的两段回文子串,要求他们共用中间的一半. 思路:利用Manacher求出p[i]表示的当前位置的最长回文串长度,然后把每一个长度大于等于2的回文串的左区间和右区间分别放到两个 ...

  6. 基于 Web 的 Go 语言 IDE - Wide 1.2.0 发布!

    Wide 是什么 Wide 是一个基于 Web 的 Go 语言团队 IDE. 在线开发:打开浏览器就可以进行开发.全快捷键 智能提示:代码自动完成.查看表达式.编译反馈.Lint 实时运行:极速编译. ...

  7. 安装oracle常见问题分析

    1,之前已经安装过软件,卸载不完全 /tmp/.oracle /tmp/ora* /var/tmp/ora* /etc/ora* 2,安装介质权限或者本身就有问题 3,oracle用户 $/HOME/ ...

  8. vue中eventbus的使用

    eventbus的方法很是简单,我们需要做三步事情: 第一步,我们需要创造一个容器去充当我们的eventbus 第二步,我们需要去抛出,或者说提交我们的事件 第三步,我们去监听我们的那个事件(也许这才 ...

  9. MVC权限验证过滤器

    Action属性,权限设定属性   [AttributeUsage(AttributeTargets.Method, Inherited = true, AllowMultiple = false)] ...

  10. angularjs input使用ng-model双向绑定无效bug解决

    一.问题描述 当我们给input双向绑定变量的时候,使用ng-model有时候会出现无效的情况 二.解决办法 将绑定的变量写成对象的形式 控制器定义变量: $scope.inputText = {va ...