博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS实现OO机制
阅读量:7107 次
发布时间:2019-06-28

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

一、简单原型机制介绍

继承是OO语言的标配,基本所有的语言都有继承的功能,使用继承方便对象的一些属性和方法的共享,Javascript也从其他OO语言上借鉴了这种思想,当一个函数通过"new"创建出一个实例后,那么这个实例就拥有这个函数的prototype对象所有的属性和方法,从而实现所有的实例都能共享一组实例和方法,Javascript所谓的类就行通过修改这个prototype对象实现的,以区别其他的原生对象,及自定义类

总结:

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静态方法实现

 

三、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

 

转载于:https://www.cnblogs.com/GreenLeaves/p/6515907.html

你可能感兴趣的文章
js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件
查看>>
HighCharts基本折线图
查看>>
WARNING: Re-reading the partition table failed with error 22: Invalid argument
查看>>
Win8下建立shortcut到開始界面
查看>>
Springboot 整合 Dubbo/ZooKeeper 详解 SOA 案例
查看>>
C++简易list
查看>>
当react框架遇上百度地图
查看>>
android创建桌面快捷键shortcut
查看>>
Codeforces 472D
查看>>
Ubuntu Linux訪问小米手机存储卡
查看>>
Python中字符串的Format用法。
查看>>
linux常用命令大全[转]
查看>>
Zabbix实现自动发现端口并监控
查看>>
Mybatis 动态 SQL
查看>>
struct 方法使用
查看>>
【从零之三(更)】自己定义类中调用讯飞语音包错误解决的方法
查看>>
数据结构之链表单向操作总结
查看>>
BZOJ3795 : 魏总刷DP
查看>>
netty4与protocol buffer结合简易教程
查看>>
vim、gvim在windows下中文乱码的终极解决方式
查看>>