JS实现OO机制
一、简单原型机制介绍
继承是OO语言的标配,基本所有的语言都有继承的功能,使用继承方便对象的一些属性和方法的共享,Javascript也从其他OO语言上借鉴了这种思想,当一个函数通过"new"创建出一个实例后,那么这个实例就拥有这个函数的prototype对象所有的属性和方法,从而实现所有的实例都能共享一组实例和方法,Javascript所谓的类就行通过修改这个prototype对象实现的,以区别其他的原生对象,及自定义类
<script>
function A(){}
A.prototype={
a:"a",
fun:function () {}
}
var a=new A();
var b=new A();
alert(a.a===b.a);//true
alert(a.fun===b.fun)//true
</script>
总结:
1、我们将定义在原型上的方法(属性)叫做原型方法,原型方法(属性)被所有的实例所共享
2、但是我们不能加所有的属性和方法都定义到原型上,JS为了实现差异化,允许我们将方法和属性定义到构造函数内部,这叫做特权方法(属性)。
3、因此我们把共享的属性和方法放到原型内,把私有的数据放到构造函数里面。
function A() {
var count=0;
this.a=1;
this.fun=function () {
}
}
A.prototype={
b:1,
fun1:function () {}
}
var a=new A();
var b=new A();
alert(a.a);//输出1
alert(a.count);//输出undefined
4、当我们把方法和属性定义于this上面,那么外界还是能访问到,所以当方法(属性)是特有属性(方法),那么别置于this之下,之间定义到构造函数内部,并用var修饰,这是它就是名副其实的私有属性。
function A(){
var count=1;
this.a=666;
this.fun=function () {
}
}
A.prototype={
a:"aaa",
b:666666,
fun:function () {
}
}
var a=new A();
var b=new A();
alert(a.a===b.a);//输出:true 因为a是基本类型所以比较值
alert(a.fun===b.fun);//输出:false 比较引用
alert(a.a);//输出:666 说明特权属性会覆盖原型属性,当两个属性名一样的时候
delete a.a;
alert(a.a);//输出:aaa 删除特权属性后,输出原型属性
5、特权方法(属性)只是遮住原型方法(属性),只要使用delete 删除,就又能访问到原型属性
二、OO静态方法实现
<script>
function A(){}
A.a=function () {
alert(1);
}
A.a();//输出:1;
</script>
三、OO继承的实现
上面介绍了原型模式的用法,我们给prototype定义了什么方法和属性,那么对应的实例就会共享prototype中的方法和属性,那么当我们将A对象的prototype属性赋给B对象时,那么B对象就拥有了所有的A对象中原型中的属性和方法。
function A(){}
A.prototype={
a:666
}
function B(){}
B.prototype=A.prototype;
var b=new B();
alert(b.a);//输出:666
由于引用着同一个对象,这意味着,我们修改A对象的原型,那么B对象的原型也会受到影响,因此我们不能把同一个对象赋给两个类,所以这个问题需要解决
方法一:通过for in把父类的原型属性和方法一一的赋给子类的原型
//通过继承拷贝来实现继承,缺点是无法通过instanceof来判断实例类型
function extend(destination,source){
for(var prototype in source){
destination[prototype]=source[prototype];
}
return destination;
}
function A(){}
A.prototype={
a:666
}
function B(){}
var b=extend(A,new A());
alert(b.a);//输出:666
方法二:子类的原型不从父类的原型那里直接获得,而是通过一个中间函数,将父类的原型赋值给该函数,然后这个函数的实例作为子类的原型
/**
* 解决通过prototype赋值型继承的应用同一个对象的问题
* @constructor
*/
//通过中间函数来解决
function A(){}
A.prototype={
a:666
}
function Bridge(){}
Bridge.prototype=A.prototype;
function B(){}
B.prototype=new Bridge();
var a=new A();
var b=new B();
alert(A.prototype==B.prototype);//说明他们的原型被分开
alert(a.a===b.a);//输出:true 子类共享父类的原型属性(方法)
//为父类动态添加方法
A.prototype.lala=function(){
alert(1);
}
b.lala();//输出:1 子类获得了这个方法
B.prototype.lele=function () {
alert(2);
}
//a.lele();//error 父类不具有子类的方法
alert(b instanceof A);//true
alert(b instanceof B);//true
方法二:能通过instanceof的验证,现在es5就自带了这种方法来实现原型继承。这种方法还有另外一种简介的实现Object.Creat
<script>
/**
* 继承2的简洁版,通过一个方法来实现继承
* @param o 父类的原型
* @returns {F} 中间函数的原型
*/
Object.create=function (o) {
function F() {}
F.prototype=o;
return new F();
}
</script>
- 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 数组属性和方法
- MySQL-InnoDb行格式与数据页结构 Krains 2020-08-08
- 《自然语言处理实战入门》 ---- 第4课 :中文分词原理及相关组件简介 之 汉语分词领域主要分词算法、组件、服务(上)...
- MySQL索引 Krains 2020-08-09
- 「查缺补漏」巩固你的Redis知识体系
- MySQL事务 Krains 2020-08-09
- Linux本地提权漏洞复现与检测思路
- 内容安全策略( CSP )
- [译] 优化 React APP 的 10 种方法
- 如何免登陆观看b站大会员番剧
- 聊聊越来越火的对象存储
- AJAX的基本原理及实例解析。
- Docker私有镜像仓库是什么?
- React Native布局详细指南
- 走进Golang之Context的使用
- 「Workshop」第十一期:降维