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

this_原型链_继承

作者: Vincent_永 | 来源:发表于2017-11-12 15:18 被阅读0次

    apply、call 、bind有什么作用,什么区别

    • apply()在使用一个指定 this 值和参数(参数以数组或类数组对象的形式存在)的情况下调用某个函数的方法。fun.apply(thisArg[, argsArray])(只接受两个参数)
    • call():在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法。fun.call(thisArg[, arg1[, arg2[, ...]]])(接受的参数个数没有上限)
    • bind()方法创建一个新的函数, 当被调用时,将其this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个给定的参数序列。
      区别:
      call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组。

    以下代码输出什么?

    var john = { 
      firstName: "John" 
    }
    function func() { 
      alert(this.firstName + ": hi!")
    }
    john.sayHi = func
    john.sayHi()  // 弹出 john hi!
    

    下面代码输出什么,为什么

    func() 
    function func() { 
      alert(this)   // 弹出window
    }  
    因为,在函数内被直接调用时this绑定到全局对象,window 就是该全局对象
    

    下面代码输出什么

      document.addEventListener('click', function(e){
        console.log(this);   // #document
      setTimeout(function(){
        console.log(this);  // window
       }, 200);
    }, false);
    

    下面代码输出什么,why

      var john = { 
        firstName: "John" 
      }
      
      function func() { 
        alert( this.firstName )
      }
      func.call(john)    // call()调用一个函数,传入函数执行上下文及参数, 弹出John
    

    以下代码有什么问题,如何修改

      var module= {
        bind: function(){
          $btn.on('click', function(){
          console.log(this) //this指什么, 
        this.showMsg();
        })
      },
    
      showMsg: function(){
        console.log('饥人谷');
      }
    }
    

    this指的是$btn,而$btn没有函数执行

    修改: 
       var module= {
          var _this = this; //  将this指向module的值赋值给_this给下面调用。
          bind: function(){
            $btn.on('click', function(){
              _this.showMsg();
          })
        },
    
        showMsg: function(){
          console.log('饥人谷');
        }
      }
    

    原型链相关问题

    有如下代码,解释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();
    

    1、Preson是构造函数,也是一个对象。
    2、p为Person的实例,拥有Person原型链上的属性和方法
    3、p.__proto__指向Person.prototype
    4、Person.prototype.constructor指向Person

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

    原型链.png
    可以从原型图中看出toString是Object.prototype的方法,p先通过p.__proto__找Person.prototype中的方法,然而没找到。然后接着p.proto.proto就找到了toString

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

      var str = 'ahbbccdeddddfg';
      var ch = str.getMostOften();
      console.log(ch); //d , 因为d 出现了5次
    

    实现方式:

      String prototype.getMostOften = function(){
        var obj = {};
        for(var i = 0; i< this.length; i++){
          var n = this[i];
          if(obj[n]){
            obj[n]++
          }else {
            obj[n] = 1
          }
        }
    
        var max = 0,
        key;
        for(var n in obj){
          if(obj[n]>max){
             max = obj[n];
             key = n;
          }
       }
      return key;
     }
     var str = 'ahbbccdeddddfg';
     var ch = str.getMostOften();
     console.log(ch);
    

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

    instanceof 用来检查对象是否是构造函数的实例。
    内部逻辑是判断从原型链底端向上判断原型链上的对象是否是否是该构造函数的原型对象

    function isInstanceOf(obj, fn){
      var oldpro = obj.__proto__;
      do{
        if(oldpro === fn.prototype){
            return true;
        }
        else {
            oldpro = oldpro.__proto__;
        }
      }while(oldpro)
        return false;
    }
    

    继承相关问题

    继承有什么作用?

    继承是指一个对象直接使用另一对象的属性和方法。
    作用

    • 子类拥有父类的属性和方法,不需要重复写代码,修改时也只需修改一份代码
    • 可以重写和扩展父类的属性和代码,又不影响父类本身

    下面两种写法有什么区别?

    1.jpg 12-1.jpg 12-2.jpg
    从上两图可以看出:
    方法一的写法是属性方法都写入p1中;
    方法二中的p1只有属性namesex,方法绑定在Person.prototype属性下,p1可以继承父类的属性和方法。
    这样做的好处是节约代码量,提高性能。

    Object.create 有什么作用?兼容性如何?

    Object.create() 方法会使用指定的原型对象及其属性去创建一个新的对象。创建一个具有指定原型且可选择性地包含指定属性的对象。
    Object.create(proto[, propertiesObject])
    Object.create()实现类式继承

    3.jpg

    hasOwnProperty有什么作用? 如何使用?

    hasOwnPerperty是Object.prototype的一个方法,可以判断一个对象是否包含自定义属性而不是原型链上的属性,hasOwnProperty是JavaScript中唯一一个处理属性但是不查找原型链的函数

    1、m.hasOwnProperty('name'); // true
    2、m.hasOwnProperty('printName'); // false
    3、Male.prototype.hasOwnProperty('printAge'); // true

    如下代码中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;
      }
    

    call可以指定函数的this ,所以这里的call指定Person中的this为Male。从而让函数Male可以调用Person的属性。

    补全代码,实现继承

    function Person(name, sex){
        // todo ...
    }
    
    Person.prototype.printName = function(){
      // todo ...
    };    
    
    function Male(name, sex, age){
       //todo ...
    }
    
    //todo ...
    Male.prototype.getAge = function(){
    //todo ...
    };
    
    var ruoyu = new Male('若愚', '男', 27);
    ruoyu.printName();
    
    继承.jpg

    相关文章

      网友评论

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

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