美文网首页饥人谷技术博客
高级2-this_原型链_继承

高级2-this_原型链_继承

作者: 饥人谷_桶饭 | 来源:发表于2017-02-23 17:12 被阅读0次

作业

this 相关问题

  • 问题1: apply、call 有什么作用,什么区别

    • apply()和call()函数都可以 指定this值和参数值的情况下调用某个函数。
    • call()和apply()的作用一样,区别在于提供给原函数的参数的方式不一样.
      • pply()函数只接受两个参数,提供给原函数的参数以数组或类数组对象的形式存在.
      • 而call()接收无限个参数, 第二个参数及其后面的参数就是提供给原函数的参数。
  • 问题2: 以下代码输出什么?

var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()//弹出john:hi!
//因为func赋给了john对象的sayHi属性,执行john.sayHi() 时 是在john对象上调用的,此时的上下文this是john了.

* 问题3: 下面代码输出什么,为什么?

    ```
func() //弹出window ,因为此时函数里的this归根结底是window调用的
function func() { 
  alert(this)
}
  • 问题4:下面代码输出什么

document.addEventListener('click', function(e){
console.log(this);//会打印document 因为这个属于绑定事件类型,此时的this指的是事件源DOM对象
setTimeout(function(){
console.log(this);//setTimeout及setInterval里的this均指window
}, 200);
}, false);

* 问题5:下面代码输出什么,why

    ```
var john = { 
  firstName: "John" 
}
function func() { 
  alert( this.firstName )
}
func.call(john)//弹出John,因call(john)就是把函数执行的上下文及参数John传给func函数。此时firstName: "John",所以this.firstName肯定是“John”了。
  • 问题6: 以下代码有什么问题,如何修改

var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指的是$btn源DOM对象
this.showMsg();//此处应该改为module.showMsg(),不改的话它会在$btn源DOM对象找showMsg().会导致this.showMsg is not a function 报错
})
},

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();
//p是Person的实例,所以继承Person原型链上的属性和方法。
//关联:
    Person.prototype.constructor == Person,
    Person.prototype == p.__proto__,
    p.__proto__.constructor == Person,
    Person.prototype.__proto__ == Object.prototype,
    Object.prototype.constructor == Object,
    Object.prototype.__proto__ == null
  • 问题8: 上例中,对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。
    答:构造函数的原型自带一个指针指向object的原型,因而toString是从object的原型里继承而来。

    Paste_Image.png
    原型链:JS在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做proto的内置属性,用于指向创建它的函数对象的原型对象prototype。在访问一个对象属性的时候,如果对象本身没有找到这个属性,就会沿着原型链一层一层的寻找。
  • 问题9:对String做扩展,实现如下方式获取字符串中频率最高的字符

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

String.prototype.getMostOften = function(){
var obj = {};
for(var i=0,k;i<this.length;i++){
k = this[i];
if(obj[k]){
obj[k]++
}else{
obj[k] = 1
}
}

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

return key;

}

* 问题10: instanceOf有什么作用?内部逻辑是如何实现的? 
答:
作用是确认instanceOf前面的对象是否是后面的对象的实例;![Paste_Image.png](https://img.haomeiwen.com/i2858982/ad8795604b45cd13.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



##继承相关问题
* 问题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:一个写在构造函数内部的实例对象上。另一个写在构建函数的prototype对象上。
//前者在每生成一个实例之后实例的printName就新占用内存。
//后者每生成一个实例后会共享构造函数prototype对象上的printName方法,以达到节省内存的效果;
  • 问题13: Object.create 有什么作用?兼容性如何?
    答:
    • Object.create()是ES5提出的一个新的方法,它可以传入一个对象作为该方法返回的对象的原型对象;

    • 兼容性:各大浏览器的最新版本(包括IE9)都兼容了这个方法。如果遇到老式浏览器,可以用下面的代码兼容:

if(!Object.create){
Object.create = function(obj){
function F(){};
F.prototype = obj;
return new F();
}
}



* 问题14: hasOwnProperty有什么作用? 如何使用?
答:
对象实例的hasOwnProperty方法返回一个布尔值,用于判断某个属性定义在对象自身,还是定义在原型链上。

var people = {
name:'teren'
}
people.hasOwnProperty('name')//true
people.hasOwnProperty('toString')//false
Object.getPrototypeOf(people).hasOwnProperty('toString')//true


* 问题15:如下代码中call的作用是什么?

    ```
function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
function Male(name, sex, age){
    Person.call(this, name, sex);    //这里的 call 有什么作用
    ////构造函数Person在构造函数Male作用域下执行,以实现构造函数的继承;
    this.age = age;
}
  • 问题16: 补全代码,实现继承

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);
Male.prototype.constructor = Male;
Male.prototype.getAge = function(){
return this.age
};
Male.prototype.getAge = function(){
console.log(this.name)
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();

相关文章

  • 高级2-this_原型链_继承

    作业 this 相关问题 问题1: apply、call 有什么作用,什么区别apply()和call()函数都可...

  • 高级2-this_原型链_继承

    this:1. apply、call 、bind有什么作用,什么区别共同作用:通过传入参数都可以改变this的值区...

  • 高级2-this_原型链_继承

    this 相关问题 问题1: apply、call 有什么作用,什么区别 Javascript的每个Functio...

  • Javascript 继承

    参考:JavaScript高级程序设计(第3版) 原型链 原型式继承 寄生式继承 寄生组合式继承

  • 继承

    原型链直接继承 原型链直接继承prototype 原型链继承_prototype属性 继承_构造函数绑定

  • js中的实现继承的几种方式

    大纲:原型链借用构造函数组合继承原型式继承寄生式继承寄生组合式继承 1、原型链: 什么是原型链? 原型链的基本思想...

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • js基础之实现继承的几种方式

    js 实现继承的方式有: 原型链继承; 构造函数继承; 组合继承(原型链继承 + 构造函数继承)(最常用);(原型...

  • es5的部分继承以及es6的class

    一、JavaScript常用的原型继承方式 原型链继承 2,构造函数继承(对象冒充继承) 3,组合继承(原型链继承...

  • 构造函数原型的继承方式分析

    1.通过原型链继承 综上我们可以总结出 通过原型链来实现继承的原理通过原型链来实现继承的原理原型链继承方案中,父类...

网友评论

    本文标题:高级2-this_原型链_继承

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