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

2017-10-14 本文已影响30人 osborne

关于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的作用和区别

2- 以下代码输出什么

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

4- 下面代码输出结果

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

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

原型链相关问题

7- 有如下代码，关于Person、 prototype、proto、p、constructor之间的关联。

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

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

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

继承相关

11- 继承的作用

12- 下面两种写法有的区别

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

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

15- 以下代码中call的作用

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

- 其他文章参考学习

猜你喜欢

热点阅读

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

关于this

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

2- 以下代码输出什么

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

4- 下面代码输出结果

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

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

原型链相关问题

7- 有如下代码，关于Person、 prototype、proto、p、constructor之间的关联。

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

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

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

继承相关

11- 继承的作用

12- 下面两种写法有的区别

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

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

15- 以下代码中call的作用

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

- 其他文章参考学习

猜你喜欢

热点阅读

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

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