美文网首页前端基础类学习
this、原型链、继承

this、原型链、继承

作者: 饥人谷_米弥轮 | 来源:发表于2017-05-08 15:55 被阅读27次

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

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

    • 这三个函数主要作用在于改变this的指向。

    • call：传递一个thisArgs参数和一个参数列表，thisArgs 指定了函数在运行期的调用者，也就是函数中的 this 对象，而参数列表会被传入调用函数中,如：

      var a = {

     name:'onepixel', //定义a的属性

    say:function(){ //定义a的方法
        console.log("Hi,I'm function a!");
    }
};

function b(name){
    console.log("Post params: "+ name);
    console.log("I'm "+ this.name);
    this.say();
}

b.call(a,'test');
>>>
Post params: test
I'm onepixel
I'm function a!

    • apply：和call效果相似，只是第二个参数传递的是数组

       function b(x,y,z){
   console.log(x,y,z);
 }
 b.apply(null,[1,2,3]); // 1 2 3

    • bind：ES5引入 bind 的真正目的是为了弥补 call/apply 的不足，由于 call/apply 会对目标函数自动执行，从而导致它无法在事件绑定函数中使用，因为事件绑定函数不需要我们手动执行，它是在事件被触发时由JS 内部自动执行的。而 bind 在实现改变函数 this 的同时又不会自动执行目标函数
      var obj = {name:'onepixel'};

      /**
* 给document添加click事件监听，并绑定onClick函数
* 通过bind方法设置onClick的this为obj，并传递参数p1,p2
*/
 document.addEventListener('click',onClick.bind(obj,'p1','p2'),false);

 //当点击网页时触发并执行
 function onClick(a,b){
     console.log(
           this.name, //onepixel
           a, //p1
           b  //p2
     )
 }

    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
    • 因为func函数为全局变量，相当于window.func() 或者是 func.call(undefined)

    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
    • 因为使用了call方法，该方法将func的this转向为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();
    • Person是一个构造函数，当new Person()的时候会创建一个空对象，然后将空对象的__proto__指向prototype，再将返回值赋值给p(实例对象)，对象的constructor属性用于返回创建该对象的函数，也就是我们常说的构造函数

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

    • p.toString()方法是继承构造函数Object的原型对象里定义的toString方法，首先p会找自己的toString方法，如果没有找到，会沿着__proto__属性继续到构造函数Person的prototype里找toString方法，如果还未找到，再继续往Person.prototype的__proto__即Object.prototype找toString方法，最后找到toString()方法。
    • 原型链：由于原型对象本身也是对象，而每个javascript对象都有一个原型对象，每个对象都有一个隐藏的proto属性，原型对象也有自己的原型，而它自己的原型对象又可以有自己的原型，这样就组成了一条链，这个就是原型链。在访问对象的属性时，如果在对象本身中没有找到，则会去原型链中查找，如果找到，直接返回值，如果整个链都遍历且没有找到属性，则返回undefined。原型链一般实现为一个链表，这样就可以按照一定的顺序来查找。
    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);
    • 区别：同样都是创建printName方法，方法1的printName方法是在函数Person实例对象里的，方法2是在Person的prototype对象上的。当再创建一个Person实例对象的时候，方法1又将会再创建一个printName方法，占用新的内存，而方法2将一个公用的printName方法写在原型上，当对象要使用该方法只需到原型链里调用就可以了，达到节省内存的效果

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

    • Object.create() 方法使用指定的原型对象和其属性创建了一个新的对象。

    • 不支持IE8以下浏览器

      function Person(name, age){
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function(){
    console.log(this.name);
}
function Male(name, age, sex){
    Person.call(this, name, age);
    this.sex = sex;
}
// Male.prototype = new Person(); //该方法同下，代替不兼容Object.create()的使用场景
Male.prototype = Object.create(Person.prototype);
Male.prototype.constructor = Male;
Male.prototype.sayAge = function(){
      console.log(this.age);
};
var p1 = new Male('hunger', 20, 'nan');
p1.sayName();//hunger
p1.sayAge();//20

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

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

    • 此方法不会检查对象的原型链中是否存在该属性，该属性只有是对象本身的一个成员才会返回true

      function Site(){
    this.name = "CodePlayer";
    this.url = "http://www.365mini.com/";

    this.sayHello = function(){
        document.writeln("欢迎来到" + this.name);
    };
}

var obj = {
    engine: "PHP",
    sayHi: function(){
        document.writeln("欢迎访问" + this.url);
    }
};
// 使用对象obj覆盖Site本身的prototype属性
Site.prototype = obj;

var s =  new Site();
document.writeln( s.hasOwnProperty("name") ); // true
document.writeln( s.hasOwnProperty("sayHello") ); // true
// 以下属性继承自原型链，因此为false
document.writeln( s.hasOwnProperty("engine") ); // false
document.writeln( s.hasOwnProperty("sayHi") ); // false
document.writeln( s.hasOwnProperty("toString") ); // false

// 想要查看对象(包括原型链)是否具备指定的属性，可以使用in操作符
document.writeln( "engine" in s ); // true
document.writeln( "sayHi" in s ); // true
document.writeln( "toString" in s ); // true

    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;
  }
    • call的作用是将构造函数Person的this指向Male，使得Male拥有Person的属性

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

    相关文章

      网友评论

        本文标题：this、原型链、继承

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

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        前端基础类学习

        关于我们|服务条款|联系我们|this、原型链、继承|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！