前端基础类学习

this、原型链、继承

2017-05-08  本文已影响27人  饥人谷_米弥轮

深入详解javascript之delete操作符
深入javascript(六)：instanceof 运算符
重新理解JS的6种继承方式
JS 的 new 到底是干什么的？

1.apply、call 、bind有什么作用，什么区别

2.以下代码输出什么?

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

3.下面代码输出什么，为什么

  func() 
  function func() { 
    alert(this)
  }    //代码输出为window

4.下面代码输出什么

  document.addEventListener('click', function(e){
      console.log(this);    //  这个this为document
      setTimeout(function(){
          console.log(this);    // setTimeout、setInterval函数的全局对象为window
      }, 200);
  }, false);

5.下面代码输出什么，why

  var john = { 
      firstName: "John" 
  }

  function func() { 
      alert( this.firstName )
  }
  func.call(john)    //  John

6.以下代码有什么问题，如何修改

  var module= {
    var _this = this   //  将this赋值给_this
    bind: function(){
      $btn.on('click', function(){
        console.log(this)   //  this 指 $btn
        this.showMsg();    //  修改为_this.showMsg
      })
    },

    showMsg: function(){
      console.log('饥人谷');
    }
  }

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

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

3704824-d6cbc01eac70a205.png

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

    // 方法一： 
    String.prototype.getMostOften = function(){
        var obj = {};
        for(var i = 0; i < this.length; i++){
            if(obj[this[i]]){
                obj[this[i]]++;
            }else{
                obj[this[i]] = 1;
            }
        }

        var count = 0,key;
        for(var k in obj){
            if(obj[k] > count){
                count = obj[k];
                key = k
            }
        }

        return key + '，出现次数：' + count
    }
    
    var str = 'ahbbccdeddddfg';
    var ch = str.getMostOften();
    console.log(ch); //d , 因为d 出现了5次

    //  方法二：
    String.prototype.getMostOften = function(){
        var arr = this.split('');
        var obj = arr.reduce(function(init,value){
            if(init[value]){
                init[value]++;
            }else{
                init[value] = 1;
            }

            return init;
        },{})

        var count = 0,key;
        for(var k in obj){
            if(obj[k] > count){
                count = obj[k];
                key = k;
            }
        }

        return key + '，出现次数：' + count
    }

    
    
    var str = 'ahbbccdeddddfg';
    var ch = str.getMostOften();
    console.log(ch);

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

instanceof运算符可以用来判断某个构造函数的prototype属性是否存在另外一个要检测对象的原型链上。

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

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

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

14.hasOwnProperty有什么作用？ 如何使用？

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

16.补全代码，实现继承

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

    Person.prototype.getName = function(){
        console.log('My name is' + 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
    // 兼容写法：
    // function Temp(){}
    // Temp.prototype = Person.prototype
    // Male.prototype = new Temp()

    Male.prototype.getAge = function(){
        console.log('My age is' + this.age)
    };
    var ruoyu = new Male('若愚', '男', 27);
    ruoyu.printName();
上一篇下一篇

猜你喜欢

热点阅读