美文网首页
this_原型链_继承

this_原型链_继承

作者: ahong_吴 | 来源:发表于2017-02-08 20:52 被阅读90次

    this部分

    原型链相关问题
    问题7:有如下代码,解释Person、 prototype、proto、p、constructor之间的关联。

    function Person(name){ 
      this.name = name;
    }
    Person.prototype.sayName = function(){ 
      console.log('My name is :' + this.name);
    }
    var p = new Person("若愚")
    p.sayName();
    

    person是构造函数;
    prototype是构造函数的原型对象;
    p是构造函数的实例;
    __proto__p的原型链,指向personprototype
    constructor即构造函数person本身。

    问题8: 上例中,对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。

    原型链 (4).png
    • toString是哪里来的?
      p首先会找自己的toString方法,如果未找到就会通过__proto__pcrsonprototype上寻找,如果未找到,就会继续通过prototype__proto__object.prototype上寻找,结果会找到toString方法。
    • 解释什么是原型链
      JS在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做__proto__的内置属性,用于指向创建它的函数对象的原型对象prototype。在访问一个对象属性的时候,如果对象本身没有找到这个属性,就会沿着原型链一层一层的寻找。

    问题9:对String做扩展,实现如下方式获取字符串中频率最高的字符

    String.prototype.getMostOften = function (){
      var obj = {};
      for(var i=0;i<this.length;i++){
        var k = this[i];
        if(!obj[k]){
          obj[k] = 1;第一次出现 次数记为1
        }else{
          obj[k]++;// 如果存在次数再加1
        }
      }
      console.log(obj);
    //遍历对象,找到出现次数最多的
      var max = 0,val;
      for(var key in obj){
        if(obj[key] > max){
    
          max = obj[key];
          val = key;
        }
      }
      return ('因为'+val+'出现了'+max+'次');
    }
    var str = 'ahbbccdeddddfg';
    var ch = str.getMostOften();
    console.log(ch); //d , 因为d 出现了5次
    
    Paste_Image.png

    问题10: instanceOf有什么作用?内部逻辑是如何实现的?

    • instanceOf:判断一个对象是否为另一个对象的实例。继承中判断实例是否属于它的父类
    Paste_Image.png Paste_Image.png

    继承相关问题
    问题11:继承有什么作用?

    • 在访问对象上的一个属性时,他会在原型链上寻找该属性,一直找到原型链的末端,所以我们在原型链上添加的方法,实例可以使用,也就是继承。
    • 继承可以减少重复的代码。比如父类已经提供的方法,子类可以直接使用,不必再去实现。

    问题12: 下面两种写法有什么区别?

    //方法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);
    

    方法一是在People函数内部创建printName方法,当再创建一个People时,printName方法又会被创建一次,所以比较消耗内存。

    方法二的printName方法是放在Person的原型上,当需要使用的时候调用就可以了,不需要重复创建printName方法。

    问题13: Object.create 有什么作用?兼容性如何?

    • Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。
    function Person(name){
       this.name = name;
    }
    Person.prototype.sayName = function(){
         console.log('My name is :' + this.name);
    }
    function People(name){
      this.name = name;
    }
    People.prototype = Object.create(Person.prototype);
    People.prototype.constructor = People;
    var p = new People('若愚');
    p.sayName();
    
    Paste_Image.png
    • 通过Object.create()方法,让People.prototype指向Person.prototype继承它的printName方法。
    • People.prototype进行修改不会影响到原来Person.prototypeprintName方法。
    • 兼容性:
    浏览器兼容.png

    问题14: hasOwnProperty有什么作用? 如何使用?
    hasOwnProperty() 方法会返回一个布尔值,其用来判断某个对象是否含有指定的属性,该方法会忽略掉那些从原型链上继承到的属性。

    Paste_Image.png

    问题15:如下代码中call的作用是什么?

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

    Male下执行Person环境,Male继承了Person的功能。

    问题16: 补全代码,实现继承

    function Person(name, sex){
        this.name = name;
        this.sex = sex;
    }
    
    Person.prototype.getName = function(){
        console.log(this.name);
    };
    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); //ES5的方法
    Male.prototype.constructor = Male;
    
    Male.prototype.getAge = function(){
        console.log(this.name);
    };
    
    var ruoyu = new Male('若愚', '男', 27);
    ruoyu.printName();
    

    方法二:

    function fn () {}
    fn.prototype = Person.prototype
    Male.prototype = new fn()
    

    相关文章

      网友评论

          本文标题:this_原型链_继承

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