html5学习笔记---05.JavaScript 中的面向对象,继承和封装
05.JavaScript 中的面向对象
a.创梦技术qq交流群:CreDream:251572072
a.JavaScript 是一种基于对象的语言
类:JavaScript 对象很抽象,所以下面将以实际的例子来解释如何定义一个简单的类。以下
是一个没有任何属性和方法的类的定义:
function MyClass(){};
如何使用这个类呢?看下面的代码:
var cls1 = new MyClass();
这样,利用new 就可以生成MyClass的一个实例了。所以,在JavaScript 中,可以说函
数就是类,类就是函数。
一个实例的封装包含属性和方法的封装。
function MyClass(name,age){
this.name = name;
this.age = age;
};
var cls1 = new MyClass("lufy",10);
alert(cls1.name + ":" + cls1.age);//[lufy:10]
从上面的代码可以看出,在函数内使用this 就能给函数本身增加属性值
还可以利用this 给这个类增加一个toString 方法,代码如下:
function MyClass(name,age){
this.name = name;
this.age = age;
this.toString() = function(){
alert(this.name + ":" + this.age);
};
};
var cls1 = new MyClass("lufy",10);
cls1.toString();//[lufy:10]
-------------------------------------------------
b.经过测试可以发现,我们已经成功地给MyClass增加了toString 方法。另外,也可以用
以下代码来添加方法:
function MyClass(name,age){
this.name = name;
this.age = age;
};
var cls1 = new MyClass("lufy",10);
cls1.toString() = function(){
alert(this.name + ":" + this.age);
};
cls1.toString();//[lufy:10]
------------------------------------------------------
c.虽然这样也能给这个类添加一个方法,但需要注意的是,这种方式只是给cls1 这个实例
增加了方法,并未给MyClass本身增加方法。比如,下面的代码会出错:
function MyClass(name,age){
this.name = name;
this.age = age;
};
var cls1 = new MyClass("lufy",10);
cls1.toString() = function(){
alert(this.name + ":" + this.age);
};
cls1.toString();//[lufy:10]
var cls2 = new MyClass("legend",12);
cls2.toString();// 报错
出错的原因是cls2 内并不存在toString 方法。可见想要通过这种方式来给一个类的本身
增加方法是行不通的。要想给MyClass类的本身增加方法,需要将方法定义在MyClass这个
函数的内部,这样的话,每声明一个新的实例,就会将MyClass本身复制一遍。但是,如果
MyClass类里包含十几个或几十个方法,那么每次都得把这些方法复制一遍,这显然不是最
优的做法。
----------------------------------------------------------------------------------------
d.既然不能将一个类(函数)所包含的方法都定义在函数的内部,那么,如何来给一个类
添加方法呢?这就需要用到函数的prototype 属性了。每一个函数都会包含一个prototype 属
性,这个属性指向了一个prototype 对象,我们可以指定函数对应的prototype 对象。如果不
指定,则函数的prototype 属性将指向一个默认的prototype 对象,并且此默认prototype 对象
的constructor 属性又会指向该函数。
当用构造函数创建一个新的对象时,新的对象会获取构造函数的prototype 属性所指向
的prototype 对象的所有属性和方法,这样一来,构造函数对应的prototype 对象所做的任何
操作都会反映到它所生成的对象上,所有的这些对象将共享与构造函数对应的prototype 对象
的属性和方法。
虽然新创建的对象可以使用它的构造函数所指向的 prototype 对象的属性和方法,但不
能像构造函数那样直接调用prototype 对象(对象没有prototype 属性)。
----------------------------------------------------------------------------------------
e.对于prototype对象来说,由于存在的是指向关系,所以避免了不必要的浪费.
例如:
function Myclass (name , age){
this.name= name;
this.age=age;
};
Myclass.prototype.toString = function(){
alert(this.name+":"+this.age);
}
var cls1 = new Myclass("lufy",10);
cls1.toString();//[lufy:10]
var cls2 = new Myclass("legend",12);
cls2.toString();//[legend:12]
---------------------------------------------
f.如果我们使用函数的Prototype对象给函数添加方法,那么在创建对象的
时候,并不会复制这个函数的所有方法,而是指向了这个函数的所有方法
如果要加入更多方法:
function Myclass (name,age){
this.name= name;
this.age=age;
};
Myclass.prototype={
toString:function(){
alert(this.name+":"+this.age);
},
sayHellow:function(){
alert(this.name+",你好!");
}
};
var cls1=new Myclass("lufy",10);
cls1.toString();//[lufy:10]
cls1.sayHellow();//[lufy,你好!]
这就是JavaScript中给类添加方法的实现,他是利用prototype来实现的.
---------------------------------------------------------
g.静态类
JavaScript 中的静态类又是如何实现的呢?
var StaticClass = function(){};
StaticClass.name = "StaticName";
StaticClass.Sum = function(value1,value2){
return value1 + value2;
};
alert(StaticClass.name);//[StaticName]
alert(StaticClass.Sum(1,3));//[4]
在使用静态类的时候,就无须创建新的实例了,可直接用“类名+ 点+ 属性或方
法”的方式。
-------------------------------------------------
h.继承
function PeopleClass(){
this.type = "人";
};
PeopleClass.prototype = {
getType:function(){
alert(" 这是一个人");
}
};
function StudentClass(name,sex){
this.name = name;
this.sex = sex;
};
如何让“学生”对象来继承“人”对象呢?可使用apply 方法将父对象的构造函数绑定
在子对象上
function StudentClass(name,sex){
PeopleClass.apply(this, arguments);
this.name = name;
this.sex = sex;
};
var stu = new StudentClass("lufy","男");
alert(stu.type);//[ 人]
------------------------------------------------
i.从运行结果来看,StudentClass 继承了PeopleClass 的属性“人”。
而方法的继承,只要循环使用父对象的prototype 进行复制,即可达到继承的目的。具
体方法如下:
function PeopleClass(){
this.type = "人";
};
PeopleClass.prototype = {
getType:function(){
alert(" 这是一个人");
}
};
function StudentClass(name,sex){
People Class.apply(this, arguments);
var prop;
for(prop in PeopleClass.prototype){
var proto = this.constructor.prototype;
if(!proto[prop]){
proto[prop] = PeopleClass.prototype[prop];
}
proto[prop]["super"] = PeopleClass.prototype;
}
this.name = name;
this.sex = sex;
};
var stu = new StudentClass("lufy","男");
alert(stu.type);//[ 人]
stu.getType();//[这是一个人]
以上,就是JavaScript 中继承的实现。
-----------------------------------------------------
html5学习笔记---05.JavaScript 中的面向对象,继承和封装相关推荐
- Python学习笔记(十九)面向对象 - 继承
Python学习笔记(十九)面向对象 - 继承 一.继承的概念 # 继承:子类继承父类的所有方法和属性# 1. 子类 class A(object):def __init__(self):self.n ...
- javascript 中的面向对象实现 如何封装
javascript 是一门很灵活的语言,也是一门有缺陷的语言. 比如我们今天要谈的,如何用面向对象的手法来封装javascript ,javascript是没有类的概念的. 所以今天谈到的封装,其实 ...
- Net基础篇_学习笔记_第十二天_面向对象继承(字符串_字符串的不可变性)
字符串的特点之一: 字符串的不可变性 1).字符串的不可变性 当你给一个字符串重新赋值之后,老值并没有销毁,而是重新开辟一块空间存储新值. 当程序结束后,GC扫描整个内存,如果发现有的空间没有被指向, ...
- C# 子类实例化基类 基类使用不了子类的方法_C#学习笔记09--构造方法/析构方法/继承/多态/封装...
一.构造方法 当创建一个类时, 系统会自动创建一个默认的无参构造方法, 这个方法和类同名, 在创建对象的时候自动调用. 默认的构造方法里面什么也没有, 重写之后就可以在创建对象的时候同时搞点事情了. ...
- HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识 标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读 评论(0) 收藏 举报 分类: JavaScr ...
- JavaScript学习笔记05【高级——DOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- 如何理解并学习javascript中的面向对象(OOP)
本文不适合javascript初学者看(javascript水平还停留在函数级别的朋友,看了会觉得很晕的).如果你想让你的javascript代码变得更加优美,性能更加卓越.或者,你想像jQuery的 ...
- JavaWeb-综合案例(用户信息)-学习笔记05【分页查询功能】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb-综合案例(用户信息)-学习笔记01[列表查询] JavaWeb-综合案例(用户信息)-学习笔记02[登录功能] JavaWeb-综合案 ...
- html5学习笔记--leon
html5学习笔记–leon ####什么是html5 1.H5并不是新的语言,而是html语言的第五次重大修改–版本 2.支持:所有的主流浏览器都支持h5.(chrome,firefox,safar ...
最新文章
- 报告老板,微服务高可用神器已祭出,您花巨资营销的高流量来了没?
- 设备自动获取ip DHCP模型 IP为169.254.4.193
- Nginx 原理和架构 | 原力计划
- 《R语言机器学习:实用案例分析》——1.8节总结
- 用C++ 设计一个不能被继承的类
- R语言编程艺术(4)R对数据、文件、字符串以及图形的处理
- chm转txt(chm转txt格式转换器安卓)
- BT6无线破解+局域网共享(附BT6下载地址)
- ONNX: export failure: Exporting the operator silu to ONNX opset version 12 is not suppo
- 职场领导想逼你走时,他会用哪些奇招逼你走?
- Spring Boot 自定義 HttpMessageConverter 解決 String 類型返回JSON對象問題
- DNS域传送漏洞(CVE-2015-5254)
- 快递单号快速查询,自动识别快递公司
- AiMesh/Merlin(梅林)开源固件的DNS使用
- 利用python实现修改阿里云DNS值解析
- 网页设计html2017体会,2017网页设计实习报告
- Springboot敏感字段脱敏
- springboot车辆管理系统的设计与实现毕业设计源码031034
- 生信 使用SRA Toolkit下载SSR数据
- Python数据可视化plt.savefig 将图片存入固定路径