this_原型链_继承

由于运行期绑定的特性，JavaScript 中的 this 含义非常多，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。
随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，<strong>那就是this指的是，调用函数的那个对象。</strong>

什么是this？

方老师讲的很好，这边我就不重复了
https://zhuanlan.zhihu.com/p/23804247?refer=study-fe

什么是apply，call？

语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])

定义：参数 thisObj 可选项。将被用作当前对象的对象。 arg1, arg2, , argN 可选项。将被传递方法参数序列。

说明 :
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
　　如果没有提供 thisObj 参数，那么 Global 对象被用作thisObj。说明白一点其实就是更改对象的内部指针，即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。

语法：apply([thisObj[,argArray]])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：
　　如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
　　如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

下面是测试this熟悉程度的题目：

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi() //输出John： hi! this是用john这个对象调用的，所以this===johN.firstName

func() 
function func() { 
  alert(this)  //直接调用函数，obj为window对象
}

document.addEventListener('click', function(e){
    console.log(this); //document调用addEventListener方法，所以this的obj为document
    setTimeout(function(){
        console.log(this); //setTimeout内调用匿名函数，obj为window
    }, 200);
}, false);

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john) //将func中的this对象设置为john

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指向$btn的原生DOM
      this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}
原型链相关问题

1.有如下代码，解释Person、 prototype、proto、p、constructor之间的关联。
Person是原型，P是Person的实例，Person的prototype定义了sayName 方法，P根据proto原型链查找sayName方法，Person的prototype方法上constructor指向了Person的地址

function Person(name){
    this.name = name;
}
Person.prototype.sayName = function(){
    console.log('My name is :' + this.name);
}
var p = new Person("若愚")
p.sayName();
  1. 上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。
Paste_Image.png

通过原型链查到object原型，里面有toString()方法

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

<script>
String.prototype.getMostOften = function() {
     var obj = {},tmp = [0];
     for (var i = 0; i < this.length; i++) {
        if(obj[this[i]]){
            obj[this[i]]++
        }
        else if(!obj[this[i]]){
            obj[this[i]]=1;
        }
     }
    for(var key in obj){
        if(obj[key]>tmp[0]){
            tmp[0]=obj[key];
            tmp.key=key;
        }
    }
    return('出现最多的是：'+tmp.key+' num： '+tmp);
   };
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
</script>

4.instanceOf有什么作用？内部逻辑是如何实现的？
判断一个实例的原型是谁

function instanceOf(obj,fn){
  var oldpro = obj.__proto__;
  while(oldpro){
    if(oldpro === fn.prototype){
        return true;
    }else{
        oldpro = oldpro.__proto__;
    }
  }
  return false;
}
继承相关问题：

1.什么是继承？继承有什么用？
概念：继承是指一个对象直接使用另一个对象的属性和方法。
作用：继承划分了类的层次性，父类代表的是更一般、更泛化的类，而子类则是更为具体、更为细化；
继承是实现代码重用、扩展软件功能的重要手段，子类中与父类完全相同的属性和方法不必重写，只需写出新增或改写的内容，这就是说子类可以复用父类的内容，不必一切从零开始。

2.下面两种写法有什么区别?

//方法1,直接在原型中写入方法，在创建P1实例的时候相当于又重新拷贝了一个printName方法
function People(name, sex){
    this.name = name;
    this.sex = sex;
    this.printName = function(){
        console.log(this.name);
    }
}
var p1 = new People('饥人谷', 2)

//方法2，通过原型链创建方法，创建P1实例的时候相当于借用原型的printName方法
function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

Person.prototype.printName = function(){
    console.log(this.name);
}
var p1 = new Person('若愚', 27);

3.Object.create 有什么作用？兼容性如何？
Object.create创建一个具有指定原型且可选择性地包含指定属性的对象。可以通过Object.create()方法实现类式继承，如：

Male.prototype = Object.create(Person.prototype);

通过Object.create()clone了一个新的prototype，使Male.prototype指向这个新的prototype，而不是直接将Person.prototype赋值给它，这样做可以避免当我修改Male.prototype的时候不会将它的父类Person.prototype也修改了。

4.hasOwnProperty有什么作用？ 如何使用？
hasOwnPerperty是Object.prototype的一个方法，可以判断一个对象是否包含自定义属性而不是原型链上的属性，hasOwnProperty是JavaScript中唯一一个处理属性但是不查找原型链的函数。

5.如下代码中call的作用是什么?

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
function Male(name, sex, age){
    Person.call(this, name, sex);    //修改this指向的对象，借用Person的name和sex属性
    this.age = age;
}

6.补全代码，实现继承

function Person(name, sex){
    this.name = name;
    this.sex = sex;
    this.printName=function(){
        console.log('Hello, '+name);
    }
}

Person.prototype.getName = function(){
    console.log('my name is ' + this.name)
};    

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

Male.prototype= Object.create(Person.prototype);

function inherit(superType, subType){   //添加constructor地址，指向Male
    var _prototype  = Object.create(superType.prototype);
    _prototype.constructor = subType;
    subType.prototype = _prototype;
}
inherit(Person, Male);

Male.prototype.getAge = function(){
    console.log('my age is ' + this.age)
};

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

这道题目能很好的去理解原型链，this，和继承

Paste_Image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念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

推荐阅读更多精彩内容