博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript学习总结(5)——Javascript面向(基于)对象编程
阅读量:6580 次
发布时间:2019-06-24

本文共 3531 字,大约阅读时间需要 11 分钟。

hot3.png

一、澄清概念

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

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

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

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

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

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

三、抽象的定义

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

四、JavaScript面向对象三大特征

  4.1.封装

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

封装的范例:

复制代码
1 
复制代码

   4.2.继承

继承范例:

复制代码
1 
复制代码

运行结果:

 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) {
//对象的成员都是对象的key10 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);//访问公共属性,弹出默认值catName25     cat1.Name="TomCat";//访问公共属性26     cat1.Age=3;//访问公共属性27     cat1.Color="白色";//访问公共属性28     alert(cat1.weight);//访问私有属性,无法访问,弹出undefined29     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("
"); 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("
")
复制代码

运行结果:

Person.constructor:function Function() {    [native code]}Person:function Person(){		}p1.constructor:function Person(){		}p1 is Person ok1p1 is Person ok2num1.constructor:function Number() {    [native code]}str1.constructor:function String() {    [native code]}

转载于:https://my.oschina.net/zhanghaiyang/blog/606707

你可能感兴趣的文章
小知识记录
查看>>
109. Convert Sorted List to Binary Search Tree
查看>>
css3 animate 和关键帧 @-webkit-keyframes
查看>>
文字链接颜色设置
查看>>
图片转流
查看>>
ubunto应用软件
查看>>
Git初始化仓库
查看>>
HTML 标签说明
查看>>
锋利的jQuery-2--判断jQuery获取到的对象是否存在$().length
查看>>
linux 查询系统版本命令、查询端口号是否被占用命令
查看>>
java笔记八:IO流之字符流与字符缓冲流
查看>>
Docker 命令收集
查看>>
myeclipse注册码生成器
查看>>
怎样快速学好PHP技术之PHP学习方法总结
查看>>
《Java工程师成神之路-基础篇》Java基础知识——序列化(已完结)
查看>>
iOS App间相互跳转漫谈 part2
查看>>
Java CAS 原理剖析
查看>>
ISCC2014 writeup
查看>>
Kotlin 知识梳理(1) Kotlin 基础
查看>>
js正则表达式
查看>>