this_原型链_继承

this

apply、call 、bind有什么作用,什么区别?

  • apply() 方法调用一个函数, 其具有一个指定的this值,以及作为一个数组(或类似数组的对象)提供的参数。

    语法:fun.apply(thisArg, [argsArray])
    thisArg:
      在 fun 函数运行时指定的 this 值。如果这个函数处于非严格模式下,则指定为 null 或
      undefined 时会自动指向全局对象。
    argsArray:
      一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 fun 函数。
    
  • call()方法和apply()方法类似,只有一个区别,计算call()方法接收若干个参数的列表,而apply()方法接收的是一个包含多个参数的数组。

  • bind()方法创建一个新的函数, 当被调用时,将其this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个给定的参数序列。

    语法:fun.bind(thisArg[, arg1[, arg2[, ...]]])
    thisArg
      当绑定函数被调用时,该参数会作为原函数运行时的 this 指向。当使用new 操作符调用绑定函数时,
      该参数无效。
    arg1, arg2, ...
      当绑定函数被调用时,这些参数将置于实参之前传递给被绑定的方法。
    返回值
      返回由指定的this值和初始化参数改造的原函数拷贝
    

以下代码输出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()  // John: hi!
// this为执行上下文,当一个函数作为对象的方法调用时,this默认指向这个对象

下面代码输出什么,为什么?

func() // [object Window]
function func() { 
  alert(this)
}
// 当直接调用一个函数时,相当于执行window.func()所以this指向window对象

下面代码输出什么?

document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);
// 输出:#document  、     Window{}
// 第一个:事件中的this默认指向绑定这个事件的对象。
// 第二个:setTimeout的执行函数中的this默认指向window对象

下面代码输出什么,why?

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john) // Jojn
// call方法用于在函数运行时指定this指,因此执行以上代码时this指向john对象

以下代码有什么问题,如何修改

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指$btn对象
      this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}
// 在事件处理函数中this指向$btn,而$btn没有showMsg()方法
// 修改:将外部this保存到一个变量中
var module= {
  bind: function(){
    var self = this
    $btn.on('click', function(){
      console.log(this)
      self.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}

原型链

有如下代码,解释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();  // 'My name is: 若愚'
// Person是一个函数,它拥有一个prototype属性,这个属性指向一个对象,而这个对象拥有一个
constructor属性,这个属性指向Person函数
// 当Person作为构造函数调用时,会先初始化一个对象,将this指向这个对象,并将它的__proto__属性指
向Person.prototype,因此p.name === "若愚",p.sayName() === Person.prototype.sayName()

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

  • toString来自Object.prototype。如图:
  • 如上图所示,当在Person的原型找不到某个方法时,就会沿着它的__proto__逐层向上,直到找到或__proto__属性为空为止,这个__proto__属性组成的链,就是原型链

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

String.prototype.getMostOften = function() {
  var  obj = {}
  var strArr = this.split('')
  strArr.forEach(function(i) {
    if (obj[i]) {
      obj[i]++
    } else {
      obj[i] = 1
    }
  })

  var max = 0, maxStr
  for (var x in obj) {
    if (obj[x] > max) {
      maxStr = x
      max = obj[x]
    }
  }

  return maxStr
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d

instanceOf有什么作用?内部逻辑是如何实现的?

  • instanceof用于判断一个对象的类型,那么它的判断规则是什么?
    • Instanceof运算符的第一个变量一般是一个对象,暂时称为A;第二个变量一般是一个函数,暂时称为B。
    • Instanceof的判断规则是:沿着A的__proto__这条线来找,同时沿着B的prototype这条线来找,如果两条线能找到同一个引用,即同一个对象,那么就返回true。如果找到终点还未重合,则返回false。

继承

继承有什么作用?

  • 继承关系是传递的。若类C继承类B,类B继承类A,则类C既有从类B那里继承下来的属性与方法,也有从类A那里继承下来的属性与方法,还可以有自己新定义的属性和方法。继承来的属性和方法尽管是隐式的,但仍是类C的属性和方法。继承是在一些比较一般的类的基础上构造、建立和扩充新类的最有效的手段。
  • 继承提供了软件复用功能。若类B继承类A,那么建立类B时只需要再描述与基类(类A)不同的少量特征(数据成员和成员方法)即可。这种做法能减小代码和数据的冗余度,大大增加程序的重用性。
  • 继承通过增强一致性来减少模块间的接口和界面,大大增加了程序的易维护性。

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

//方法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方法,
使用方法2构造的每个对象调用printName方法时都是调用的Person.prototype.printName方法
方法2大大节省了内存

Object.create 有什么作用?兼容性如何?

  • Object.create() 方法会使用指定的原型对象及其属性去创建一个新的对象。兼容ie9及以上浏览器

    var p1 = Object.create(xxx.prototype)   相当于:
    var fn = {}
    fn.__proto__ = xxx.prototype
    var p1 = fn
    

hasOwnProperty有什么作用? 如何使用?

  • hasOwnProperty() 方法会返回一个布尔值,指示对象是否具有指定的属性作为自身(不继承)属性。

    遍历一个对象所有自身属性:
    var buz = {
        fog: 'stack'
    };
    
    for (var name in buz) {
        if (buz.hasOwnProperty(name)) {
            alert("this is fog (" + name + ") for sure. Value: " + buz[name]);
        }
    }
    

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

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
function Male(name, sex, age){
    Person.call(this, name, sex);    
    //调用Person函数,并把它的this变为Male函数的this,用此方法可实现对Person实例属性的继承
    this.age = age;
}

补全代码,实现继承

function Person(name, sex){
    this.name = name
    this.sex = sex
}

Person.prototype.printName = function(){
    console.log(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(){
    console.log(this.age)
};

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

推荐阅读更多精彩内容