永利皇宫402面向对象封装与持续,使用介绍

永利皇宫402

  整理一下js面向对象中的封装和一连。

用过JavaScript的同室们明确都对prototype名满天下,可是那究竟是个怎么样事物却让初大家莫衷一是,只知道函数都会有多少个prototype属性,可以为其增多函数供实例访谈,别的的就不知晓了,最近看了一些
JavaScript高档程序设计,终于揭秘了其隐私面纱。

1.封装
  js中封颇具相当多样实现方式,这里列出常用的二种。

各类函数都有八个prototype属性,那特特性是指向贰个指标的援引,那么些指标称为原型对象,原型对象涵盖函数实例分享的章程和属性,约等于说将函数用作构造函数调用(使用new操作符调用)的时候,新创立的对象会从原型对象上连续属性和艺术。

1.1 原始形式调换对象
  直接将大家的分子写入对象中,用函数重返。
劣势:非常不好看出是一个形式出来的实例。

个人变量、函数

代码:

在切切实实说prototype前说多少个有关的东东,能够更好的驾驭prototype的布置性意图。从前写的一篇JavaScript
命名空间文章中涉嫌过JavaScript的函数功效域,在函数钦点义的变量和函数如若不对外提供接口,那么外部将无法访问到,也正是产生私有变量和民用函数。

复制代码 代码如下:

复制代码 代码如下:

       function Stu(name, score) {
            return {
                name: name,
                score: score
            }
        }
        var stu1 = Stu(“张三”, 80);
        var stu2 = Stu(“李四”, 90);
        console.log(stu1.name); // 张三

function Obj(){
                var a=0; //私有变量
                var fn=function(){ //私有函数

1.2 生成构造方式对象

                }
            }

  js帮大家提供了贰个采用构造函数生成对象的形式,¨所谓“构造函数”,其实正是三个习认为常函数,可是其中选拔了this变量。当使用new关键字对构造函数生成实例后,this变量则会绑定在实例对象上。

如此在函数对象Obj外界不能够访问变量a和函数fn,它们就形成私有的,只好在Obj内部使用,尽管是函数Obj的实例依旧无法访谈那个变量和函数

  直接上代码:

复制代码 代码如下:

复制代码 代码如下:

var o=new Obj();
            console.log(o.a); //undefined
            console.log(o.fn); //undefined

      function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        var stu1 = new Stu(“张三”, 80);
        var stu2 = new Stu(“李四”, 90);
        console.log(stu1.name + “/” + stu2.score); // 张三  90
        console.log((stu1.constructor == Stu) + “/” + (stu2.constructor
== Stu)); // true  true
        console.log((stu1 instanceof Stu) + “/” + (stu2 instanceof
Stu)); // true  true

静态变量、函数

  简单看出js的构造函数生成对象和C#用class生成对象一模一样,都是用模板定义对象成员通过new关键字实例化。

当定义二个函数后经过
“.”为其丰裕的质量和函数,通过对象自小编还是可以访问获得,但是实际例却访谈不到,那样的变量和函数分别被可以称作静态变量和静态函数,用过Java、C#的同校很好驾驭静态的含义。

用C#代码生成同样的Stu对象

复制代码 代码如下:

复制代码 代码如下:

function Obj(){

Class Stu
{
  public string name;
  public double score;                   
}

            }

  ok,到那时候基本的对象有了。
那么未来咱们需求二个全体指标都公用的不二诀要,并且只让这么些办法创设一回。(不趁早对象new而重复成立)  如何做呢?
大家都理解在C#中大家能够用静态成员。那么在js中如何做呢?

            Obj.a=0; //静态变量

1.3 Prototype模式

            Obj.fn=function(){ //静态函数

  在js中,每叁个构造函数都有二个prototype属性,那么些指标的持有属性和办法,都会被构造函数的实例继承。那么大家向来给prototype加多成员就也便是在C#中宣示静态成员了。

            }

代码:

            console.log(Obj.a); //0
            console.log(typeof Obj.fn); //function

复制代码 代码如下:

            var o=new Obj();
            console.log(o.a); //undefined
            console.log(typeof o.fn); //undefined

      function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        Stu.prototype.type=’学生’;
永利皇宫402,        Stu.prototype.log = function (s) {
            console.log(s);
        }
        var stu1 = new Stu(“张三”, 80);
        var stu2 = new Stu(“李四”, 90);
        console.log(stu1.type + “/” + stu2.type); // 学生 学生
        stu1.log(‘hello’);  // hello
        console.log(stu1.log == stu2.log);  // true

实例变量、函数

卷入就讲到这儿了,上边我们来探望js中继续又是哪些达成的?

在面向对象编制程序中除去有个别库函数大家照旧期待在对象定义的时候还要定义一些质量和措施,实例化后得以访问,JavaScript也能到位那样

2.继承

复制代码 代码如下:

2.1 构造函数绑定

function Obj(){
                this.a=[]; //实例变量
                this.fn=function(){ //实例方法

  在子函数中一直调用
call或apply方法,将父对象的构造函数绑定在子对象上。
 

                }
            }

复制代码 代码如下:

            console.log(typeof Obj.a); //undefined
            console.log(typeof Obj.fn); //undefined

   function Stu(name, score) {
            Grade.apply(this, arguments);
            //Grade.call(this, arguments);
            this.name = name,
            this.score = score
        }
        function Grade() {
            this.code = “初中”;
            this.ask = function () {
                console.log(“大家好”);
            }
        }
        var stu1 = new Stu(“张三”, 80);
        var stu2 = new Stu(“李四”, 90);
        console.log(stu1.code); // 初中
        stu1.ask(); // 大家好

            var o=new Obj();
            console.log(typeof o.a); //object
            console.log(typeof o.fn); //function

  这里的apply做了两件事情,把第1个参数this给Grade构造函数(调用者),然后再进行Grade里的代码。就相当于将Grade中用this定义的分子在Stu中再奉行三回。

诸如此比能够完结上述目标,但是

2.2 通过prototype继承
  先看代码

复制代码 代码如下:

代码:

function Obj(){
                this.a=[]; //实例变量
                this.fn=function(){ //实例方法

复制代码 代码如下:

                }
            }

    function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        function Grade() {
            this.code = “初中”;
        }
        Stu.prototype = new Grade();
        Stu.prototype.constructor = Stu;
//制止承继链的乌烟瘴气,手动重新恢复设置评释
        var stu1 = new Stu(“张三”, 80);
        var stu2 = new Stu(“李四”, 90);
        console.log(Stu.prototype.constructor); // 本人的构造函数
        console.log(stu1.code); // 初中

            var o1=new Obj();
            o1.a.push(1);
            o1.fn={};
            console.log(o1.a); //[1]
            console.log(typeof o1.fn); //object
            var o2=new Obj();
            console.log(o2.a); //[]
            console.log(typeof o2.fn); //function

眼前说过prototype就相当于C#中的静态成员,所以我们就把父类的享有成员都产生温馨的静态成员来兑现延续。

下面的代码运营结果完全符合预期,但还要也认证三个主题素材,在o第11中学修改了a和fn,而在o2中未有改观,由于数组和函数都以目的,是引用类型,那就认证o第11中学的属性和措施与o2中的属性与方法即使同名但却不是叁个援引,而是对Obj对象定义的特性和格局的贰个复制。

  通过prototype承接有一个缺陷:全部继续的积极分子都以静态的,那么怎么继承对象成员呢?

其一对品质来讲未有啥样难题,但是对于措施来讲难点就不小了,因为方法都以在做完全一致的职能,可是却又两份复制,倘使贰个函数对象有上千和实例方法,那么它的种种实例都要保全一份上千个办法的复制,那明摆着是不正确的,这可咋做呢,prototype应际而生。

2.3 拷贝承接

prototype

  把父对象的具有属性和方法,拷贝进子对象,达成持续。

任由什么样时候,只要创立了一个新函数,就能够依据一组特定的平整为该函数创建二个prototype属性,暗许意况下prototype属性会默许获得一个constructor(构造函数)属性,那一个天性是叁个针对prototype属性所在函数的指针,有些绕了哟,写代码、上海教室!

代码:

复制代码 代码如下:

复制代码 代码如下:

function Person(){

    function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        function Grade() {}
        Grade.prototype.code = “初中”;
    }
        //函数封装
        function extend(C, P) {
            var p = P.prototype;
            var c = C.prototype;
            for (var i in p) {
                c[i] = p[i];
            }
        }
        extend(Stu, Grade);
        var stu1 = new Stu(“张三”, 80);
        var stu2 = new Stu(“李四”, 90);
        stu1.code=’高中’;
        console.log(stu1.code); // 高中
        console.log(stu2.code); // 初中
        console.log(Stu.prototype.constructor);
        console.log(Grade.prototype.constructor)

            }

   
js面向对象的股盘的整理就写到那了,这么些东西亦不是铁定的事情的,使用的时候依据自个儿的要求做改动。 
有句话说的很好,合适的才是最棒的。

永利皇宫402 1

此处只针对封装和持续实行了深入分析,后续大家再做一些任什么地方方的小说,让小伙伴们越来越长远的了然javascript面向对象编制程序。当然都是个体的一部分知晓,如有遗漏,请联系作者。

基于上海教室能够看到Person对象会活动获取prototyp属性,而prototype也是一个对象,会自行获得八个constructor属性,该属性正是指向Person对象。

您或者感兴趣的小说:

  • Javascript基于对象三大特征(封装性、承袭性、多态性)
  • js中落到实处多态采纳和继续类似的诀要
  • javascript
    面向对象斩新理练之继续与多态
  • JavaScript多态与包装实例深入分析
  • javascript的函数、创制对象、封装、属性和章程、承袭
  • JavaScript的模块化:封装(闭包),承继(原型)
    介绍
  • js封装可使用的构造函数承接用法分析
  • Javascript学习笔记9
    prototype封装承继
  • JavaScript的持续的卷入介绍
  • 简易理解JavaScript中的封装与持续特性
  • JavaScript贯彻多态和延续的包装操作示例

当调用构造函数创制四个实例的时候,实例之军长包涵二个之中指针(相当多浏览器这些指针名称为__proto__)指向构造函数的prototype,那一个一连存在于实例和构造函数的prototype之间,并不是实例与构造函数之间。

复制代码 代码如下:

function Person(name){
                this.name=name;
            }

            Person.prototype.printName=function(){
                alert(this.name);
            }

            var person1=new Person(‘Byron’);
            var person2=new Person(‘Frank’);

永利皇宫402 2

Person的实例person第11中学隐含了name属性,相同的时间自动生成贰个__proto__天性,该属性指向Person的prototype,能够访问到prototype钦点义的printName方法,大约正是以此样子的

永利皇宫402 3

写段程序测量试验一向下探底视prototype内属性、方法是能力所能达到分享

复制代码 代码如下:

function Person(name){
                this.name=name;
            }

            Person.prototype.share=[];

            Person.prototype.printName=function(){
                alert(this.name);
            }

            var person1=new Person(‘Byron’);
            var person2=new Person(‘Frank’);

            person1.share.push(1);
            person2.share.push(2);
            console.log(person2.share); //[1,2]

果真!实际受愚代码读取有些对象的某些属性的时候,都会实行二遍寻觅,指标是持有给定名字的属性,搜索首先从指标实例开始,如若在实例中找到该属性则再次回到,若无则查找prototype,借使还是不曾找到则接二连三递归prototype的prototype对象,直到找到甘休,借使递归到object仍旧没有则赶回错误。一样道理假若在实例中定义如prototype同名的品质或函数,则会覆盖prototype的性质或函数。

复制代码 代码如下:

function Person(name){
                this.name=name;
            }

            Person.prototype.share=[];

            var person=new Person(‘Byron’);
            person.share=0;

            console.log(person.share); //0而不是prototype中的[]

协会轻易对象

自然prototype不是特意为竭泽而渔地点难点而定义的,不过却化解了上边难点。精通了这个文化就足以创设三个不错些的、复用率高的对象,即便愿意实例对象的质量或函数则定义到prototype中,若是希望各种实例单独具有的习性或形式则定义到this中,能够通过构造函数传递实例化参数。

复制代码 代码如下:

function Person(name){
                this.name=name;
            }

            Person.prototype.share=[];

            Person.prototype.printName=function(){
                alert(this.name);
            }

作者:色拉油

您也许感兴趣的篇章:

  • js中继续的三种用法计算(apply,call,prototype)
  • 详解Javascript中prototype属性(推荐)
  • JavaScript中的prototype使用表明
  • Javascript基于对象三大特色(封装性、承继性、多态性)
  • javascript
    面向对象斩新理练之继续与多态
  • js中贯彻多态选择和后续类似的措施
  • JavaScript兑现多态和一连的卷入操作示例
  • JavaScript多态与包装实例剖判
  • JavaScript使用prototype原型实现的包裹承袭多态示例

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图