zoukankan      html  css  js  c++  java
  • Javascript 对象继承 原型链继承 对象冒充 call 混合方式

    一、原型链继承 

    function ClassA() {}
    ClassA.prototype.color = "blue";
    ClassA.prototype.sayColor = function () {
        alert(this.color);
     };
     
    function ClassB() {}
    //继承ClassA的原型内容 
     ClassB.prototype = new ClassA();

      这样ClassB的实例化对象b有个_prop_属性指向了ClassB.prototype,而其本身(ClassB.prototype)又是ClassA的实例化对象,所以,ClassB.prototype也有个_prop_属性指向了ClassA.prototype的原型对象,ClassA.prototype本身又是Object的实例化对象,有个_prop_属性指向了Object.prototype的原型对象,所以,都能使用继承链上所有prototype上的属性和方法。

    注意:
    1、原型链除了继承prototype的内容也能继承ClassA函数内的方法(注意:如果方法中含有this的引用,会出现undefined,可以通过对象冒充来解决该问题)
    2、原型链不能将父类对象this改为子类对象this
    3、如果要使用原型链,那么前提是父类是使用原型定义的

    二、经典对象冒充方式

    //父类
            function Person(name,age)
            {
                this.name = name;
                this.age = age;
                
                this.show = function()
                {
                    window.alert(this.name+"..."+this.age);
                }
            }
            
            Person.prototype.sayHi = function(){
                alert("hi");
            }
            
            
            //子类
            function Student(name,age)
            {
                this.student = Person;    //将Person类的构造函数赋值给this.student
                this.student(name,age); //js中实际上是通过对象冒充来实现继承的
                delete this.student;    //移除对Person的引用
            }
            
            var s = new Student("小明",17);
            s.show();
            //s.sayHi(); //对象冒充不能继承prototype内容            
            
            var p = new Person("小明",17);
            p.show();
            p.sayHi();
            
            
            //子类2
            function MidStudent(name,age)
            {
                this.midstudent = Person;
                this.midstudent(name,age);
                
                //实现方法重载
                this.show = function()
                {
                    window.alert("midstudent show()");
                }
            }
            
            var m = new MidStudent("张三",11);
            m.show();

    三、call方式

      /* call()方法是与经典的对象冒充方法最相似的方法
                【第一个参数】用作 this 的对象。
                【其他参数】直接传递给函数自身。
            */
        
            function sayColor(sPrefix,sSuffix) {
                alert(sPrefix + this.color + sSuffix);
            };
    
            var obj = new Object();
            obj.color = "blue";
    
            
            //理解:将sayColor中原本的this替换成了obj的this
            //最后生成的消息 "The color is blue, a very nice color indeed." 将被显示出来
            sayColor.call(obj, "The color is ", "a very nice color indeed.");

    四、混合方式 call+原型链

          function ClassA(sColor) {
                this.color = sColor;
            }
    
            //类1:给ClassA类加入sayColor方法 注意:对象冒充无法继承prototype加入的内容
            ClassA.prototype.sayColor = function () {
                alert(this.color);
            };
    
            
            
            //类2:使用对象冒充方式继承ClassA
            function ClassB(sColor, sName) {
                ClassA.call(this, sColor); 
                this.name = sName;
            }
        
            //重点注意:这里是将ClassB的原型继承ClassA
            ClassB.prototype = new ClassA();
            
            //给ClassB类加入sayName方法
            ClassB.prototype.sayName = function () {
                alert(this.name);
            };
  • 相关阅读:
    Opencv在mac系统的安装与试用
    VINS 估计器之检查视差
    C语言——第零次作业
    C语言博客05指针
    循环结构
    C语言博客作业数组
    函数3
    C博客作业01分支、顺序结构
    group by的查询
    layui多张图片上传最多9张(新增和修改时的显示问题)
  • 原文地址:https://www.cnblogs.com/shawnhu/p/8470781.html
Copyright © 2011-2022 走看看