高级2：this&原型链&继承

问题1： apply、call 、bind有什么作用，什么区别

  • apply、 call的作用和区别
    基本语法： fn.apply(context, [parama, param2, param3...]); fn.call(context,param1, param2, param3...)
    作用：使函数在运行this指向context
    区别：call方法中传入的是一个参数列表，而apply方法中的参数二是一个数组或类数组对象
  • call,apply常用用法：
    1. 数组之间的累加；
    2. 获取数组中的最大值和最小值，利用他们扩充作用域拥有Math的min和max方法；由于没有什么对象调用这个方法，所以第一个参数可以写作null或者本身；
     var num =  [1,4,23,7,8,10];
 var maxNum  = Math.max.apply(Math,num);//23
 var minNum  = Math.min.call(Math,1,4,23,7,8,10)//1
    1. 验证是否是数组（前提是toString（）方法没有被重写过）
     var a = [1,23,4]
 var b = 100
 function  isArray(obj){ 
      return Object.prototype.toString.call(obj) === '[object Array]' ;
 }
 isArray(a)//true
 isArray(b)//false
    1. 让类数组拥有数组的方法
    function joinStr(){
  // return arguments.join('-') 类数组没有数组的方法
  console.log(Array.prototype.join.call(arguments,'-'))
  //在数组的原型上与下面等同  a-b-c-d
  console.log([].join.call(arguments,'-'))//a-b-c-d
}
joinStr('a','b','c','d')
  • bind的作用：返回一个新的函数function，并使function内部的this指向传入的第一个参数，传入bind（）方法的第二个及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数；
var obj = { 
    name: 'Byron', 
    fn : function(){ 
        console.log(this); 
    } 
} 
var obj2 = { name: 'obj2' }
var fn2 = obj.fn.bind(obj2); //this指向obj2 fn2()
  • 关于三者：
    1. 都是用来改变函数的this对象的指向的；
    2. 第一个参数都是this要指向的对象；
    3. 都可以利用后续参数传参；
    4. bind是返回对应函数，便于稍后调用，apply、call是立即调用；

问题2： 以下代码输出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()

输出的结果为：弹出John: hi!
对象的方法调用，this指向调用方

问题3： 下面代码输出什么，为什么

func() 
function func() { 
  alert(this)
}

输出结果：弹出window

问题4：下面代码输出什么

document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);

第一个console.log(this)中的this指向DOM，输出的是document
第二个console.log(this)中的this指向全局，输出的是window

问题5：下面代码输出什么，why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)

输出结果：弹出John ，call调用，this指向call的第一个参数，这里是call(john)指向了john对象里的this

问题6： 以下代码有什么问题，如何修改

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

  showMsg: function(){
    console.log('饥人谷');
  }
}

console.log(this)中的this指向DOM(此处为绑定事件$btn)，应该让this指向module这样当点击按钮是才会打印 ‘饥人谷’
修改：

var module= {
  var _this = this
  bind: function(){
    $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属性，而构造函数内部定义了实例的属性和方法，这些属性和方法是属于该类的所有实例的特征；
    p是通过构造函数Person构造出来的实例，也是拥有__proto__属性；prototype是构造函数内部的原型对象，所以拥有contructor和__proto__属性，其中contructor属性指向构造函数Person，__proto__指向该对象的原型
  • 总结：
p.__proto__ === Person.prototype 
p.__proto__.constructor === Person 
Person.prototype.constructor === Person 
Person.prototype.__proto__ === Object.prototype 
Object.prototype.constructor === Object

第一句话：prototype是函数的原型对象，即prototype是一个对象，它会被对应的__proto__引用。
第二句话：要知道自己的__proto__引用了哪个prototype，只需要看看是哪个构造函数构造了你，那你的__proto__就是那个构造函数的prototype。
第三句话：所有的构造函数的原型链最后都会引用Object构造函数的原型，即可以理解Object构造函数的原型是所有原型链的最底层，即Object.prototype.__proto===null

作者：宣泽彬
链接：https://www.jianshu.com/p/7119f0ab67c0
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

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

  • toString()是从原型Object里面继承的

  • 原型图


    原型链
  • 什么是原型链
    原型对象本身也是对象，而每个javascript对象都有一个原型对象，每个对象都有一个隐藏的__proto__属性，原型对象也有自己的原型，而它自己的原型对象又可以有自己的原型，这样就组成了一条链，这个就是原型链。在访问对象的属性时，如果在对象本身中没有找到，则会去原型链中查找，如果找到，直接返回值，如果整个链都遍历且没有找到属性，则返回undefined。原型链一般实现为一个链表，这样就可以按照一定的顺序来查找。

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

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

String.prototype.getMostOften = function (){ 
    var obj ={}   //存放每个i出现的次数 
    var k; 
    for(var i =0 ; i<this.length ; i++){ 
        k = this[i]; 
        if(obj[k]){  
            obj[k] ++ //如果存在，对应的值+1； 
        }else{
            obj[k] = 1  //如果obj[k]不存在 给他赋值 =1 ；
        }
    }
    var max = 0; 
    var key ; 
    for(var j in obj ){  //循环obj 
        if(obj[j]>max){ 
            max = obj[j]  //如果obj[j]的值大于max 就赋值给max 最后max获取obj[j]里最大的的值； 
            key = j 
        } 
    } 
    return key; 
} 
var str = 'ahbbccdeddddfg'; 
var ch = str.getMostOften(); 
console.log(ch); //d
运行结果.png

问题10： instanceOf有什么作用？内部逻辑是如何实现的？

instanceOf是一个运算符。object instanceof constructor，instanceof用来检测 constructor.prototype是否存在于参数 object 的原型链上，如果存在则返回true；否则false(简单理解：A instancrof B用于判断A 是否是B 的一个实例，或者是A是否是以B为父类型的一个实例。)

function Person(){} 
var p = new Person() 

p instanceof Person //true 
Person instanceof Object //true 
p instanceof Object //true 
p.__proto__.__proto__===Object.prototype //ture

内部逻辑：

function isInstanceOf(obj, fn){ 
    var objproto = obj.__proto__; 
    do{ 
        if(objproto === fn.prototype){ 
            return true; 
        } else { 
            objproto = objproto.__proto__; 
        } 
    }while(objproto) 
    return false; 
}

问题11：继承有什么作用?

  • 概念：继承是指一个对象直接使用另一个对象的属性和方法。
  • 作用：
    1. 继承划分了类的层次性，父类代表的是更一般、更泛化的类，而子类则是更为具体、更为细化；
    2. 子类拥有父类的属性和方法，不需要重复写代码，修改时也只需修改一份代码.
    3. 可以重写和扩展父类的属性和代码，又不影响父类本身；
    4. 优化内存空间

问题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()，作为新对象的私有属性，这样较为消耗内存；
方法2：将printName()作为构造函数原型上的方法，在实例化的时候，所有实例共享这个方法，可以优化内存空间

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

  • 作用：Object.create() 方法使用指定的原型对象和其属性创建了一个新的对象，如下代码
  • 兼容性 ：can i use
    兼容性.png

问题14： hasOwnProperty有什么作用？ 如何使用？

  • 作用：obj,hasOwnProperty(pro) 判断某个对象是否包含自定义属性而不是从原型链上继承到的属性。
  • 用法：
function People(){
  this.name=name
}
People.prototype.sayName=function(){
    console.log(this.name)
}

var p = new People()
p.hasOwnProperty('name')//true
p.hasOwnProperty('sayName')//false
hasOwnProperty.png

问题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;
}

使Male创建的实例能够继承Person上的属性。

问题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){
    // todo ...
    this.name = name
    this.sex = sex
}

Person.prototype.getName = function(){
    // todo ...
    console.log('name:'+ this.name)
};    

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

//todo ...
Male.prototype = Object.create(Person.prototype)
Male.prototype.constructor = Male;

Male.prototype.getAge = function(){
    //todo ...
    console.log('age:'+ this.age)
};

var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,324评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,303评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,192评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,555评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,569评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,566评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,927评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,583评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,827评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,365评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,941评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2赞 342

推荐阅读更多精彩内容