zoukankan      html  css  js  c++  java
  • JavaScript面向对象编程

    一:创建对象的模式 

     1工厂模式:用函数封装以特定的接口创建对象的细节。

    function Person(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.sayName = function(){
            alert(this.name)}                
        return obj;
    }
    let P1=Person("bob",22);
    let P2=Person("Anna",21);

      2 构造函数模式:在调用函数的时候如果不加new则为普通函数,如果加new则可视为对象

    function Person(name,age){
        this.name=name;
        this.age=age;
        this.sayName = function(){
            alert(this.name)};
    }
    let P1=new Person("bob",22);
    P1.sayName(); let P2
    =new Person("Anna",21);
    P2.sayName();
    Person("George",23);//普通调用
    window.sayName();//添加到window

    let o=new Object;
    Person.call(o,"Cristin",24)
    o.sayName();

      2.1寄生构造函数模式:

        

    function Person(name,age){
        let obj = new Object();
        obj.name=name;
        obj.age=age;    
        obj.sayName = function(){
    alert(this.name);}
      return obj; }
    //用于在特殊情况下来为对象创建构造函数。
    function specialArray(){
    let arr = new Array();
    arr.push.apply(values,arguments);
    arr.toPipedString = arr.join("|");
    return arr;
    }

      3 原型模式:prototype,即在Person中的属性均为Person.prototype.name = name等代码,以下直接展示最常用的原型+构造函数模式

    function Person(name,age){
        this.name=name;
        this.age=age;    
    }
    Person.prototype.sayName=fucntion(){
        alert(this.name);
    }
    
    let P1 = new Person("george",23);
    
    P1.sayName()

      3.1 动态原型模式:

    function Person(name,age){
        this.name = name;
        this.age=age;
        if (typeof this.sayName != "function"){
            Person.prototype.sayName(){
                this.name;}}}

    二 继承:

      1 原型链继承

    function SuperType(){
    this.property=true;
    }
    SuperType.prototype.getSuperValue = function(){
    return this.property;}
    
    function SubType(){
    this.subproperty=false;
    }
    
    subType.prototype = new Supertype();
    
    SubType.prototype.getSubValue = function(){
    return this.subproperty;}
    
    let s1 = new SubType();
    s1.getSuperValue;//true
    s1.getSubValue;//false



    //原型式继承
    function object(o){
    function F(){//创建一个临时性构造函数
    F.prototype=o;//传入参数作为该函数的原型
    return new F();//返回该函数的实例,实际上该实例已经包含了参数的原型,复制了一遍。
    }
    //ECMA5中引入了Object.create()的方法
    var person ={
    name:"Anna",
    age:"20",
    friend:["Mike","bob"]}
    var p1=Object.create(person);
    p1.name = "george";
    p1.friend.push("Niclaos")
    var p2=Object.create(person);
    p2.name;//Anna 字符串为基本类型值,栈内存
    p2.friend;//["Mike","bob","NIclaos"]数组时引用类型值,堆内存

      2 借用构造函数继承

    function SuperType(){
    this.colors=["red","green","blue"];
    }
    function SubType(){
    SuperType.call(this);//相当于创建了一个副本,所以相互不影响
    }
    let s1 = new SubType();
    s1.colors.push("black");//["red","green","blue","black"]
    
    let s2 = new SubType();
    s2.colors;//["red","green","blue"]

      3 组合继承:(原型链+构造函数)

      

    function SuperType(name){
    this.name=name;
    this.color=["red","green","blue"];
    }
    SuperType.prototype.sayName=function(){
    alert(this.name);
    }
    
    function SubType(name,age){
    SuperType.call(this,name);//继承SuperType属性,传一个name参数
    this.age=age;
    }
    
    SubType.prototype = new SuperType;//继承方法
    
    SubType.prototype.sayAge=function(){
    alert(this.age);}
    
    let s1 = new SubType( "Anna",23);
    s1.sayName;//Anna
    s1.sayAge;//23
    s1.color//["red","green","blue"]

      2 寄生式继承

    function createAnother(original){
    let clone =Object.create(original);//创建一个寄生的对象
    //给对象一些增强型方法
    clone.sayHi
    =function(){ alert("HI");};
    返回这个对象
    return clone; } var person={ name :"Anna", age:"18"} var anotherPerson = createAnother(person); anotherPerson.sayHi();

      3 寄生组合式继承(最常用)

    function SuperType(name,age){
        this.name=name;
        this.age=age;}
    
    SuperType.prototype.sayName=function(){
        alert(this.name);
        }
    
    function SubType(name,age){
        SuperType.call(this,name,age);
        this.friend=["anna","bob"];
        }                              //继承属性
    
    SubType.prototype = Object.create(SuperType.prototype);//继承方法
    
    SubType.prototype.constructor = SubType;         //重定向构造器
    
    SubType.prototype.sayfriend=function(){
        alert(this.friend);};                  //增强方法
    let s1=new SubType("George",21);
    s1.constructor;//SubType
    s1.sayName;//George
    s1.sayAge;//21
    s1.name;//George
  • 相关阅读:
    页面适应UIWebView大小,不出现横向滚动条[转]
    switch case 遍历 table表头的时候使用枚举来便利 (switch 不支持字符串类型,用这种方式来达到使用目的)
    Builder 解析 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示
    用2个层来显示 table 第一行 定位 效果。 支持ie6/ie7/ff/chrome,两个方向滚动条 ,保证最后一列也能对齐
    FORM 不换行的方法
    table 固定显示第一行 & 动态改变table高度
    select options 排序(保持option 对象完整性)
    JQuery ajax 如何设置同步调用(同时只能触发一个函数) 解决与层显示信息时候的冲突问题
    针对ie6 用层来实现select的title 提示属性 (增加含有滚动条情况的支持)
    定义新对象方法
  • 原文地址:https://www.cnblogs.com/BigJ/p/inheritance.html
Copyright © 2011-2022 走看看