zoukankan      html  css  js  c++  java
  • 关于JavaScript中实现继承,及prototype属性

    感谢Mozilla 让我弄懂继承。

    JavaScript有八种基本类型,函数属于object。所以所有函数都继承自object。//扩展:对象,基本上 JavaScript 里的任何东西都是对象,而且都可以被储存在变量里。将这个记在脑子里。

    与传统的基于类的面向对象语言不同,javascript中没有从一个类扩展出另一个类的底层类结构。在javascript中,继承是通过简单地从一个对象原形向另一个对象原形复制方法而实现的。---《javascript DOM 高级程序设计》

    并且每个函数和对象都有prototype属性。("原型链"(prototype chain)模式)

    所有就构造了如同树结构一般的原型链。

    常见的几种继承方法:

    1.简单的继承

    var ClassA={};
    ClassA.sayHi=function(){...};
    var ClassB={};
    ClassB.sayColor=function(){...};
    ClassB.sayHi=ClassA.sayHi;

    直接复制,简洁明了。缺点是,要是继承的属性过多,需要写大量代码。

    2.

    function ClassA(sColor) {
        this.color = sColor;
        this.sayColor = function () {
            alert(this.color);
        };
    }
    function ClassB(sColor, sName) {
        this.newMethod = ClassA;
        this.newMethod(sColor);
        delete this.newMethod;
    
        this.name = sName;
        this.sayName = function () {
            alert(this.name);
        };
    }
    var objA = new ClassA("blue");
    var objB = new ClassB("red", "John");
    objA.sayColor();    //输出 "blue"
    objB.sayColor();    //输出 "red"
    objB.sayName();//输出 "John"

    以上代码,主要的在标红部分,先解释ClassB函数体中标红第一句:

    this.newMethod = ClassA;
    this是指的当前对象的拥有者。代码,this.newMethod = ClassA在ClassB的函数体中。
    假如我var v=new ClassB();//ClassB函数体中的this就指代的v,因为v是ClassB函数体的拥有者。
    //以上代码,具体经历了哪些步骤,我们先分析一下:
    this肯定是指的ClassB。所以this.newMethod 可以就解释为ClassB新建一个newMethod属性并且赋值ClassA。//this.XXX快速建立一个属性,或者修改属性值

    接着解释ClassB标红第二句:
    this.newMethod(sColor);
    关键在这第二句,代码上的this毋庸置疑肯定是指的ClassB。具体执行表示:执行newMethod函数。//就是执行ClassA
    //步骤解释
    newMethod既然赋值为ClassA,那newMethod就有ClassA所有属性和方法
    function newMethod(sColor) {
        this.color = sColor;
        this.sayColor = function () {
            alert(this.color);
        };
    }

    之前说过,this当前对象拥有者,newMethod是ClassB的属性,所有newMethod函数体中的this指代的是ClassB

    执行函数体中的代码就是,ClassB.color=Scolor;ClassB.sayColor=function...;//动态添加属性

    ClassB中的第三句:

     delete this.newMethod;//删除属性
    既然我ClassB已经拥有了ClassA中的方法和属性了,newMethod对ClassB已经没有用了。
    
    

    3.

    function ClassA() {
        this.color = "red";
        this.sayColor = function () {
            console.log(this.color);
        };
    }
    ClassA.prototype.height=100;
    function ClassB() {
        this.color="bule";
    }
    ClassB.prototype=new ClassA();
    ClassB.prototype.width=200;
    var b =new ClassB();
    b.sayColor();//bule

    如下例:

     var BaseCalculator = function() {
            this.t=2;
        };//这是一个构造函数
    
        BaseCalculator.prototype = {
            add: function(x, y) {
                return x + y;
            },
            subtract: function(x, y) {
                return x - y;
            }
        };
        var Calculator = function () {
            //为每个实例都声明一个数字
           this.tax = 5;
        };
    
        Calculator.prototype = new BaseCalculator();//继承
       //Calculator.prototype.constructor=Calculator;
       Calculator.prototype.add = function (x, y) {
            return x + y + this.tax;
        };

    (样式图 根据上代码画图)

    如样式图--详细解释

  • 相关阅读:
    OpenShift提供的免费.net空间 数据库 申请流程图文
    javascript实现全选全取消功能
    编写一个方法来获取页面url对应key的值
    面试题目产生一个int数组,长度为100,并向其中随机插入1-100,并且不能重复。
    面试宝典
    HDU 4619 Warm up 2 贪心或者二分图匹配
    HDU 4669 Mutiples on a circle 数位DP
    HDU 4666 最远曼哈顿距离
    HDU 4035 Maze 概率DP 搜索
    HDU 4089 Activation 概率DP
  • 原文地址:https://www.cnblogs.com/v-weiwang/p/4759521.html
Copyright © 2011-2022 走看看