第三十七弹-继承

一、问题

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

继承的作用,可以使用原型链上的属性和方法,这样的方式可以节省内存空间。同时将相同作用的代码抽象出来,提高了代码的复用性,也更容易让人理解。


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

  • 直接声明
    这种方法的缺点就是声明太过于繁琐,重复造轮子
var p1={
        name:"xiaohan",
        sayName:function(){
          console.log(this.name);
        }
      };
      var p2={
        name:"xiaosu",
        sayName:function(){
          console.log(this.name);
        }
      };
      p1.sayName();
      p2.sayName();
  • 工厂模式
    工厂模式比直接声明提高了代码的复用性,下面的例子中我无法获知p1、p2 和creatPerson之间的关系。
      function creatPerson(name){
        var obj={
          name:name,
          sayName:function(){
            console.log(this.name);
          }
        };
        return obj;
      }
      var p1=creatPerson("xiaohan");
      p1.sayName();
      var p2=creatPerson("xiaosu");
      p2.sayName();
  • 构造函数模式
    构造函数方式可以清除的表示构造函数和对象之间的关系,但每个对象都会重复创造公用的方法。
      function Person(name){
        this.name=name;
        this.sayName=function(){
          console.log(this.name);
        }
      }
      var p1=new Person("xiaohan"),
          p2=new Person("xiaosu");
          p1.sayName();
          p2.sayName();
          console.log(p1.sayName===p2.sayName)  //false
  • 原型方式
    原型方式将每个对象的通用方法 放到构造函数的原型对象上,这样每个对象都使用同一个公用方法,减少了内存的使用
      function Person(name){
        this.name=name;
      }
      Person.prototype.sayName=function(){
        console.log(this.name);
      }
      var p1=new Person("xiaohan"),
          p2=new Person("xiaosu");
          p1.sayName();
          p2.sayName();
      console.log(p1.sayName===p2.sayName)  //true

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

方法一中每一个创建的对象都有一个独立的printName方法,方法二中每一个创建对象共享原型对象中的printName方法

    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);

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

Object.create()方法创建一个拥有指定原型和若干个指定属性的对象,是ES5的方法。
语法:
Object.create(proto, [ propertiesObject ])
参数:
proto 作为新创建对象的原型
*propertiesObject * 可选。该参数对象是一组属性与值,该对象的属性名称将是新创建的对象的属性名称,值是属性描述符(这些属性描述符的结构与Object.defineProperties()
的第二个参数一样)。注意:该参数对象不能是 undefined
,另外只有该对象中自身拥有的可枚举的属性才有效,也就是说该对象的原型链上属性是无效的。

兼容性:IE9+,Chrome5+,Firefox 4.0+,Opear 11.60+,Safari 5+
作用:
1.使用Object.create实现继承

    function Animal(category,moveMethod){
      this.category=category;
      this.moveMethod=moveMethod;
    }
    Animal.prototype.say=function(){
      console.log("我属于:"+ this.category + ",移动的时候是:" + this.moveMethod);
    }
    function Dog(name){
      var category="狗类",
          moveMethod="跑啊跑";
      Animal.call(this,category,moveMethod);
      this.name=name;

    }
    Dog.prototype=Object.create(Animal.prototype);
    Dog.prototype.sayName=function(){
      console.log(this.name);
    }
    Dog.prototype.constructor=Dog;
    var d1=new Dog("旺财");
    d1.say()    //我属于:狗类,移动的时候是:跑啊跑
    d1.sayName() //旺财

2.创建对象

    function Animal(category,moveMethod){
      this.category=category;
      this.moveMethod=moveMethod;
    }
    Animal.prototype.say=function(){
      console.log("我属于:"+ this.category + ",移动的时候是:" + this.moveMethod);
    }
    var fish=Object.create(Animal.prototype,{
      category:{
        writeable:true,
        configurable: true,
        value:"鱼"
      },
      moveMethod:{
        writeable:true,
        configurable: true,
        value:"游啊游"
      }
    });

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

  • hasOwnProperty()方法用来判断某个对象是否含有指定的自身属性。
  var o ={
      name:"xiaohan",
      age:18
    }
    console.log(o.hasOwnProperty("name"));  //true
    delete o.name;
    console.log(o.hasOwnProperty("name"));  //false
  • in 运算符不同,该方法会忽略掉那些从原型链上继承到的属性
    var o ={
      name:"xiaohan",
      age:18
    }
    console.log(o.hasOwnProperty("name"));  //true
    console.log(o.hasOwnProperty("toString")); //false 

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

if(typeof Object.create!=="function"){
  Object.create=function(){
    function Temp(){};
    var hasOwn=Object.prototype.hasOwnProperty;
    return function(){
      var args=arguments;
          proto=args[0];
      if(typeof proto !=="object")  return;
      Temp.prototype=proto;
      var obj=new Temp();
      Temp.prototype=null;   //每次释放掉
      if(arguments.length>1){
        properties=Object(arguments[1]);  //装箱? = =new Object();
        for(var pro in properties){
          if(hasOwn.call(properties,pro)){
            obj[pro]=properties[pro];
          }
        }
      }
      return obj;
    }
  }();
}

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

call的作用就是改变函数的上下文;
当 Male作为函数调用时,this=window 相当于在window上加了三个属性;
而Male作为构造函数使用时 this指代创建的对象,相当于在对象初始化了 三个属性;

    function Person(name, sex){
      this.name = name;
      this.sex = sex;
    }
    function Male(name, sex, age){
      Person.call(this, name, sex);    //这里的 call 有什么作用
      this.age = age;
    }

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

    function Person(name, sex){
        this.name=name;
        this.sex=sex;
    }

    Person.prototype.printName = 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(){
        return this.age;
    };
    var ruoyu = new Male('若愚', '男', 27);
    ruoyu.printName();

参考文档:


本教程版权归小韩同学和饥人谷所有,转载须说明来源

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,915评论 2 17
  • 继承有什么作用? (难度:3*) 继承可以使一个对象直接使用另一个对象的属性和方法。 有几种常见创建对象的方式? ...
    coolheadedY阅读 539评论 0 0
  • 问题 1.继承有什么作用? 继承是指一个对象直接使用另一对象的属性和方法。 作用:1.当js中的两个对象有很多的共...
    GarenWang阅读 397评论 0 0
  • var a = 1; console.log(typeof a);// 'number' var b = '1';...
    zdnexus阅读 347评论 0 0
  • Q&A: 1. 继承有什么作用? 概念:继承是指一个对象直接使用另一个对象的属性和方法。 作用:继承划分了类的层次...
    进击的阿群阅读 606评论 0 1