美文网首页
关于 this_原型链_继承 相关问题总结

关于 this_原型链_继承 相关问题总结

作者: osborne | 来源:发表于2017-10-14 22:44 被阅读30次

    关于this

    1- apply、call 、bind的作用和区别

    • apply、call 、bind都有改变this值的作用，
      apply和call的用法区别就在于第二个参数，apply接受的第二个参数是数组，而call第二个参数接受的是不定参。
      bind的参数和call一样，但是bind是返回一个新的函数，并不是立即调用，可以在任何时候去调用。(bind能够绑定参数的情况下，再给已经被bind过的结果函数传参数，参数没有作用,在使用bind的时候传进去的参数才有效，后面使用该返回的函数时，只是调用。但是后面传入的参数会在Arguments里体现。但是如果在绑定当时没有传入参数，而是在调用的时候再传参数，此时的参数是有作用的。)看例子：
    function a(xx, yy) {     
console.log(xx, yy);     
console.log(this);     
console.log(arguments);
} 
var thisObj = {name:'haha'};

a.apply(null, [5, 55]); //第一个参数不设置，不改变原this指向
a.call(thisObj, 5, 55); //设置第一个参数，该方法里的this改变成thisObj
var b = a.bind(null, 5, 55); //返回一个新函数
b();

    这些方法主要的作用是在一些本身不具备某些方法时，可以借用其他对象的方法来完成。例如：

    var nodes = document.getElementsByClass('item'); //得到一个类数组对象
//我想获取数值最大的那个对象
Arrary.prototype.max.apply(null, nodes); //借用Arrary的方法，将我需要的结果算出来

    2- 以下代码输出什么

    var john = { 
   firstName: "John" 
}
function func() {
   alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
    • 输出: John: hi!
    • 原因:将函数func赋值给sayHi,sayHi也就是一个函数了，执行此函数，这里面的this就是john这个对象

    3- 下面代码输出什么，及原因

    func() 
function func() {
    alert(this)
}
    • 输出: Object window
    • 原因:因为函数声明会前置，所以在声明前调用也是可以的，因为是在全局环境下调用，相当于window.func()，所以this的值是window。

    4- 下面代码输出结果

    document.addEventListener('click', function(e){ 
    console.log(this); //document ,执行click方法的是document
    setTimeout(function(){
        console.log(this); //Window  setTimeout方法的调用者是Window
    }, 200);
}, false);
    • 输出:
      document
      window
    • 原因:事件处理函数中的this指的是其对应的dom对象,setTimeout中的this指的是window

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

    var john = {
  firstName: "John" 
}

function func() {
  alert( this.firstName )
}
func.call(john)
    • 输出: John
    • 原因: func.call()中传入了对象john,因此将func中this的值设置为了对象john

    6- 下面代码有什么问题，怎么来修改

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

 showMsg: function(){
    console.log('饥人谷');
  }
}
    • 问题:事件处理函数中的this指的是该事件处理函数绑定的对象,即$btn,因此该对象没有showMsg()方法
    • 修改:在bind内部设置一个变量将this保存下来,这样在事件处理函数中使用该变量来调用showMsg方法
    var module= {
  bind: function(){
    var _this = this;
    $btn.on('click', function(){
      console.log(this) //this指什么
      _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构造函数创建之后有一个prototype属性是一个对象，这个prototype对象上有一个constructor属性是指向Person构造函数的。当实例化一个p时，首先创建了一个空对象，并把这个对象的proto属性指向Person.prototype,然后将实例对象传入构造函数执行函数，最后返回实例对象。当实例p.sayName()时，先在自己的属性中找，如果没有找到就在proto指向的原型上找，如果找到了就执行，没有找到就继续向上找，直到最顶层的null。

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

    • 原型链: 每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针.如果让原型对象等于另一个类型的实例,则原型对象将包含一个指向另一个原型的指针,相应的另一个原型也包含着一个指向另一个构造函数的指针.如此层层递进,就构成了实例与原型的链条,即原型链

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

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

    结果：

    var str = 'ahbbccdeddddfg';

String.prototype.getMostOften = function(){
    var maxKey;
    var countArr = this.split("");
    var countObj = {};
    var i = 0;
    //计算每个字符出现的次数
    for(i; i < countArr.length; i++){
        if(countObj[countArr[i]]){
            countObj[countArr[i]] += 1;
        }
        else{
            countObj[countArr[i]] = 1;
        }
    }
    console.log(countObj);
    var sortNum = 0;
    for(var key in countObj){
        if(countObj[key] > sortNum){
            sortNum = countObj[key];
            maxKey = key;
        }
    }
    return maxKey;
};


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

    10- instanceOf的作用 ，内部逻辑是如何实现的

    • 使用 object instanceof constructor
    • 作用:检测 constructor.prototype 是否存在于参数 object 的原型链上
    • 内部实现逻辑：每个实例都包含一个指向原型对象的内部指针(proto),通过该指针可以找到其原型链上的所有内容,因此可以检测 constructor.prototype 是否存在于参数 object 的原型链上.如：
    function _instanceof(A, B) {
    var O = B.prototype;// 取B的prototype
    A = A.__proto__;// 取A的__proto__
    while (true) {
        //Object.prototype.__proto__ === null
        if (A === null)
            return false;
        if (O === A)// 当 O 严格等于 A 时，返回 true
            return true;
        A = A.__proto__;
    }

    继承相关

    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);
    • 方法1:将printName方法放在了构造函数中,但是由于使用了匿名函数,因此每个实例的printName方法都是不同的(尽管功能相同,但每个实例的printName方法都会占用内存空间),并没有实现代码的复用
    • 方法2:将printName方法放在了Person的原型对象中,当Person的实例调用printName方法时,会沿着原型链,找到Person的原型对象,使用Person的原型对象中的printName方法,因此,尽管每个Person实例都可以调用printName方法,但是这些printName方法都指的是Person的原型对象中的printName方法.实现了代码的复用

    13- Object.create 的作用，及兼容性

    • Object.creat()是创建一个拥有指定原型和若干个指定属性的对象。
      语法：Object.create(proto,[propertiesObject])
    //创建一个空对象
var o = {};
var o = Object.create(Object.prototype);

//创建一个带有属性的对象
var o = Object.create(Object.prototype,{ p:{value:88 } } );
var o = {
  p:88
}

//创建一个实例
function Person(){
}
var o = new Person();
var o = Object.create(Person.prototype);
    • Object.Create()兼容性：

    14- hasOwnProperty的作用，及如何使用

    • hasOwnProperty这个方法可以用来检测一个对象是否含有特定的自身属性(和方法),该方法会忽略掉那些从原型链上继承到的属性(和方法)。
    • 使用: obj.hasOwnProperty(prop),prop指要检测的属性,可以是字符串或者Symbol,返回一个true或false。

    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传入，这样实例对象上就会有name和sex属性

    16- 通过补全代码来实现继承

    function Person(name, sex){
    // todo ...
}

Person.prototype.getName = function(){
    // todo ...
};

 function Male(name, sex, age){
    //todo ...
}

//todo ...
Male.prototype.getAge = function(){
    //todo ...
};

var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();

    完整：

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

Person.prototype.getName = function(){
    return this.name;
};

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

Male.prototype = Object.create(Person.prototype); //继承Person的原型

/**
** 自定义方法写在继承之后
**/
Male.prototype.getAge = function(){
    console.log(this.age);
    return this.age;
    
};

Male.prototype.printName = function(){
    console.log(this.getName());
    return this.getName();
    
};

var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();
    - 其他文章参考学习

    相关文章

      网友评论

          本文标题：关于 this_原型链_继承 相关问题总结

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

          延伸阅读

          深度阅读

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

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|关于 this_原型链_继承 相关问题总结|投稿指南|网站地图|RSS订阅|排版工具|手机版

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

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

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

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

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