继承

作者: Nicklzy | 来源:发表于2016-09-27 20:50 被阅读42次

    继承有什么作用? (难度:***

    • 得到一个类的属性
    • 得到一个类的方法

    有几种常见创建对象的方式? 举例说明? (难度:****

    • 直接赋值
      var obj = new Object或者var obj = {};
    • 工厂模式
      function createCake(name, age){
      var obj = {
      name: name,
      sayName: function(){
      console.log('我是' + this.name);
      }
      }
      return obj;
      }
      var cake1 = createCake('草莓味面包');
      var cake2 = createCake('巧克力面包');
    • 构造函数模式
      function Cake(name) {
      this.name = name;
      this.sayName = function(){
      console.log('我是' + this.name);
      }
      }
      var cake1 = new Cake('草莓味面包'),
      cake2 = new Cake('巧克力面包');
      console.log( cake1 instanceof Cake ); //true
      console.log( cake2 instanceof Cake ); //true

    下面两种写法有什么区别? (难度:***

    //方法1
    function People(name, sex){
      this.name = name;
      this.sex = sex;
      this.printName = function(){
        console.log(this.name);
      }
    }
    var p1 = new People('饥人谷', 2)
    
    //方法2
    function Person(name, sex){
      this.name = name;
      this.sex = sex;
    }
    
    Person.prototype.printName = function(){
      console.log(this.name);
    }
    var p1 = new Person('若愚', 27);
    

    方法一每创建一个实例,都会将printName绑定在实例的私有空间内;而方法二函数将printName放在prototype内,该函数构建的实例共用方法printName,减少代码量。

    Object.create 有什么作用?兼容性如何?如何使用? (难度:***

    • Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象

    Object.create(proto, [ propertiesObject ])

    例子:Male.prototype = Object.create(Person.prototype);

    • ES5新特性,需要IE9及以上的版本

    hasOwnProperty有什么作用? 如何使用? (难度:***

    • hasOwnPerperty是Object.prototype的一个方法,可以判断一个对象是否包含自定义属性而不是原型链上的属性,hasOwnProperty是JavaScript中唯一一个处理属性但是不查找原型链的函数
    m.hasOwnProperty('name'); // true
    m.hasOwnProperty('printName'); // false
    Male.prototype.hasOwnProperty('printAge'); // true
    

    实现Object.create的 polyfill,如:(ps: 写个 函数create,实现 Object.create 的功能) (难度:****)

    if (typeof Object.create != 'function'){
      Obj.create = (function(){
        function Temp() {}
        var hasOwn = Object.prototype.hasOwnProperty;
        return function(proto){
          if (typeof proto != 'object'){
            throw TypeError('Object prototype may only be an Object or null');
          }
    
          Temp.prototype = proto;
          var obj = new Temp();
          Temp.prototype = null;
    
          if (arguments.length > 1){
            var Properties = Object(arguments[1]);
            for (var prop in Properties){
              if (hasOwn.call(Properties, prop)) {
                obj[prop] = Properties[prop];
              }
            }
          }
          return obj;
        };
      })();
    }
    

    如下代码中call的作用是什么? (难度:****

    function Person(name, sex){
        this.name = name;
        this.sex = sex;
    }
    function Male(name, sex, age){
        Person.call(this, name, sex);    //改变this指向实现实例的继承。
        this.age = age;
    }
    

    补全代码,实现继承 (难度:****

    function Person(name, sex){
        // todo ...
    }
    
    Person.prototype.getName = function(){
        // todo ...
    };    
    
    function Male(name, sex, age){
       //todo ...
    }
    
    //todo ...
    Male.prototype.getAge = function(){
        //todo ...
    };
    
    var ruoyu = new Male('若愚', '男', 27);
    ruoyu.printName();
    
    function Person(name, sex){
        this.name = name;
        this.sex = sex;
    }
    
    Person.prototype.getName = function(){
        console.log(this.name);
    };    
    
    function Male(name, sex, age){
        Person.call(this,name,sex);
        this.age = age;   
    }
    
    Male.prototype = Object.create(Person.prototype);
    Male.prototype.constructor=Male;
    Male.prototype.getAge = function(){
        console.log(this.age)
    };
    Male.prototype.printName=function(){
        console.log(this.name);
    };
    var ruoyu = new Male('若愚', '男', 27);
    ruoyu.printName();
    

    代码题

    效果预览

    相关文章

      网友评论

        本文标题:继承

        本文链接:https://www.haomeiwen.com/subject/ckqqyttx.html