zoukankan      html  css  js  c++  java
  • js中的继承

    变量提升:在js中可以允许变量先使用后声明。例如:

       x=5;
       var x;

    函数相关概念:

    函数声明:function add(){}

    函数表达式:var add=function(){}

    匿名函数:function(){}

    创建一个对象:

          1.对象的字面量创建    var o={}

          2.new一个对象的实例   var o=new Object()

          3.Object.create()   var o=Object.create(Object.prototype);

    工厂模式:

     function create(name,age,job){
         var o = new Object()
         o.name = name;
         o.age = age;
         o.job = job;
         o.sayName = function(){
             alert(this.name);
         }
         return o;
     }
     
     var p1 = create("nick",10,"web");
     p1.sayName()

    构造函数模式:

    function Create(name,age,job){
        this.name = name;
        this.age = age;
        this.job =  job;
        this.sayName = function(){
            alert(this.name);
        }
    }
    
    var p1 = new Create("nick",11,".net");
    p1.sayName();

    创建一个 对象或实例需要经历的步骤:

      1.创建一个对象;

      2.将构造函数的作用域赋给新创建的对象;

      3.执行构造函数的代码,(为新对象添加熟悉);

      4.返回新对象;

    原型模式:

    function Create(){}
    Create.prototype.name = "nick";
    Create.prototype.age = 11;
    Create.prototype.job = "java";
    Create.prototype.sayName = function(){
        alert(this.name);
    }
    var p1 = new Create();
    p1.sayName();
    
    var p2 = new Create();
    p2.sayName();

    isPrototypeOf()  检测一个对象是否是另一个对象的原型。或者说一个对象是否被包含在另一个对象的原型链中

    hasOwnProperty()   p2.hasOwnProperty("name") 判断p2是否包含name这个属性;

    还可以用In    ("name" in p2)   //false

    组合使用函数构造模式和原型模式:

    function Create(name,age,job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.color = ["red","bule"];
    }
    Create.prototype.sayName=function(){
        alert(this.name);
    }
    var p1 = new Create("nick",23,"js");
    p1.color.push("abc");
    console.log(p1.color);
    p1.sayName();
    
    var p2 = new Create("abc",11,"web");
    console.log(p2.color);

    动态原型模式:

    function Create(name.age,job){
        this.name = name;
        this.age = age;
        this.job = job;
        if(typeof this.sayName!="function"){
            Create.prototype.sayName(){
                alert(this.name);
            }
        }
    }
    
    var p2 = new Create("afda",33,"fdsa");
    p2.sayName();

    寄生构造函数模式:

    function Create(name,age,job){
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayName=function(){
            alert(this.name);
        }
        return o;
    }
    
    var p1 = new Create("mrq",23,"abc");

    稳妥构造函数模式:

      稳妥对象,是指没有公共属性,而其方法也不引用this对象

       特点:创建对象实例不引用this,不使用new操作符调用构造函数

    function Create(name,age,job){
        var o = new Object();
        o.sayName = function(){
            console.log(name);
        }
        return o;
    }
    var p1 = Create("mrq",33,"afa");
    p1.sayName();

    继承:

    原型链继承:

    function SuperType(){
        this.pro=true;
    }
    
    SuperType.prototype.getSuperPro=function(){
        return this.pro;
    }
    
    function Subtype(){
        this.subpro=false;
    }
    
    Subtype.prototype = new SuperType();
    
    Subtype.prototype.getsubpro=function(){
        return this.subpro;
    }
    
    var p1 = new Subtype();
    console.log(p1.getSuperPro());

    借用构造函数继承:

    function Supertype(name){
        this.name = name;
    }
    function Subtype(){
        Supertype.call(this,"nick");
        this.age = 22;
    }
    var p1 = new Subtype();
    alert(p1.name);
    alert(p1.age);

    组合继承:

    function SuperType(name){
        this.name = name;
        this.colors = ["red", "blue", "green"];
    }
    
    SuperType.prototype.sayName = function(){
        console.log(this.name);
    };
    
    function Subtype(name,age){
        SuperType.call(this,name);
        this.age = age;
    }
    
    Subtype.prototype = new SuperType();
    Subtype.prototype.sayAge = function(){
       console.log(this.age);
    };
    
    var instance1 = new Subtype("Nicholas", 29);
    instance1.colors.push("black");
    console.log(instance1.colors); // red, blue, green, black
    instance1.sayName(); // Nicholas
    instance1.sayAge(); //29
    
    var instance2 = new Subtype("Greg", 2);
    console.log(instance2.colors); // red, blue, green
    instance2.sayName(); // Greg
    instance2.sayAge(); //2

    原型式继承:

    function obj(o){
        function F(){}
        F.prototype = o;
        return new F();
    }
    
    var p1 = {
        name:"mrq",
        age:11;
    }
    
    var p2 = obj(p1);
    alert(p2.name);
    
    var p3 = obj(p1);
    alert(p3.name);

    其中原型式继承和Object.create()效果一样。都是返回一个函数的实例,Object.create()方法规范了原型式继承;

    var o;
    
    // 创建一个原型为null的空对象
    o = Object.create(null);
    
    
    o = {};
    // 以字面量方式创建的空对象就相当于:
    o = Object.create(Object.prototype);
    
    
    o = Object.create(Object.prototype, {
      // foo会成为所创建对象的数据属性
      foo: { 
        writable:true,
        configurable:true,
        value: "hello" 
      },
      // bar会成为所创建对象的访问器属性
      bar: {
        configurable: false,
        get: function() { return 10 },
        set: function(value) {
          console.log("Setting `o.bar` to", value);
        }
      }
    });

    寄生式继承:

    寄生式继承实际上就是原型式继承+一个函数外壳,通过函数外壳内调用实现原型式继承的函数,然后再将一个新的变量指向返回一个对象的实例,再新的对象添加属于自己的函数,再返回这个函数。这里的寄生就是指的一个封装继承过程的函数,该函数内部用某种方法雷增强对象,最后返回这个被增强的对象。比如在这个函数内给被封装的对象添加一个属性或者方法;

    function object(o){
        function F(){}
        F.prototype = o;
        return new F();
    }
    function createAnother(original){
        var clone = object(original);
        clone.sayHi = function(){
            alert('hi')
        };
        return clone;
    }
    var person = {
        name:"Nicholas",
        friends:["Shelby", "Court", "Van"]
    }
    
    var anotherPerson = createAnother(person);
    anotherPerson.sayHi();

    寄生组合式继承:

    function object(o){
        function F(){}
        F.prototype = o;
        return new F();
    }
    
    function inheritPrototype(subType,superType){
        var prototype = object(superType.prototype);
        prototype.constructor = subType;
        subType.prototype = prototype;
    }
    
    function SuperType(name){
        this.name = name;
        this.colors = ["red", "blue", "green"];
    }
    
    SuperType.prototype.sayName = function(){
        console.log(this.name);
    }
    
    function Subtype(name,age){
        SuperType.call(this,name);
        this.age = age;
    }
    
    inheritPrototype(Subtype, SuperType);
    
    Subtype.prototype.sayAge = function(){
        console.log(this.age);
    }

    语言描述:

    1.原型链继承:一个父类,一个子类,将子类的原型prototype指向父类的一个实例;

    2.借用构造函数继承:在子类构造函数内部调用父类构造函数,通过父类.call(this,x)方式或者apply()

    3.组合继承:将原型链,借用构造函数继承一起使用,通过原型链继承实现对原型属性和方法的继承,通过构造函数继承来实现对实例属性的继承;

    4.原型式继承:在一个函数内部定义一个构造函数,将传入的对象作为这个构造函数的原型,最后返回一个新实例;

    5.寄生式继承:创建一个用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后返回对象。

  • 相关阅读:
    强烈推荐:240多个jQuery插件【转】
    逆变与协变详解
    Mac入门 (二) 使用VMware Fusion虚拟机
    JQUERY UI DOWNLOAD
    几个常用Json组件的性能测试
    jQuery.extend 函数详解
    获取Portal中POWL程序的APPLID
    设计师和开发人员更快完成工作需求的20个惊人的jqury插件教程(上)
    Linux kernel中网络设备的管理
    mongodb修改器
  • 原文地址:https://www.cnblogs.com/justyouadmin/p/10598004.html
Copyright © 2011-2022 走看看