美文网首页
关于 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_原型链_继承 相关问题总结

    关于this 1- apply、call 、bind的作用和区别 apply、call 、bind都有改变thi...

  • this_原型链_继承相关问题

    在函数被直接调用时this绑定到全局对象。在浏览器中,window 就是该全局对象,函数调用模式this指向win...

  • JS this_原型链_继承 相关问题

    this 1,apply、call 、bind有什么作用,什么区别 apply/call:调用一个函数,传入函数执...

  • this_原型链_继承

    1.apply、call 、bind有什么作用,什么区别 bind:返回一个新函数,并且使函数内部的this为传入...

  • this_原型链_继承

    this 相关问题 1: apply、call 、bind有什么作用,什么区别? 在JS中,这三者都是用来改变函数...

  • this_原型链_继承

    this 相关问题 1.apply、call 、bind有什么作用,什么区别 fn.apply(context ,...

  • this_原型链_继承

    this 相关问题 问题1: apply、call 、bind有什么作用,什么区别 在 javascript 中,...

  • this_原型链_继承

    问题1: apply、call 、bind有什么作用,什么区别 改变函数执行时的上下文,具体的就是指绑定this指...

  • this_原型链_继承

    1: apply、call 、bind有什么作用,什么区别 作用:改变函数体内 this 的指向 区别:对于 ap...

  • this_原型链_继承

    1.apply、call 、bind有什么作用,什么区别 call apply的作用:调用一个函数,传入函数执行上...

网友评论

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

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