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

• call 和 apply 作用一样。都是把obj(this)绑定到thisobj上。重新定义函数的执行环境.call接受n个参数的列表，apply接受若干个参数的数组

obj.call(thisobj,arg1,arg2,....)

obj.apply(thisobj,[arg1,arg2,...])

为什么要有apply和call？

function T(name){

this.name = name

this.show = function(){

console.log(this.name)

}

}

function Person(age){

this.age = age

}

假设在Person函数体内也需要这么一个show方法且一模一样，但又不想如下这样写，代码显得重复。

function Person(age,name){

this.age = age

this.show = function(){

console.log(this.name)

}

}

这时候call apply就有用了

function Person(age,name){

T.call(this,name)

this.age = age

}

### bind()和call 和 apply类似，也是改变this.

###  只不过bind()是引用(不会立即执行)。call是调用(会立即执行)

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

var john = {

firstName: "John"

}

function func() {

alert(this.firstName + ": hi!")

}

john.sayHi = func

john.sayHi()

***
var john = {

firstName: 'John',

func: function(){}

}

john.sayHi()//这里的this指向john

Jonh:hi!

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

func()

function func() {

alert(this)

}

*** 

函数内部：this的值取决于函数时如何调用的

func() === undefined

但有些浏览器把undefined错误转换为window

func() === window

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

document.addEventListener('click', function(e){

console.log(this);

setTimeout(function(){

console.log(this);

}, 200);

}, false);

***

- 这里的this指向window

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

var john = {

firstName: "John"

}

function func() {

alert( this.firstName )

}

func.call(john)

***



func() 执行 使用call把john当this传递进去 此时this变成john

输出 ： 'John'

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

var module= {

bind: function(){

$btn.on('click', function(){

console.log(this) //this指什么

this.showMsg();

})

},

showMsg: function(){

console.log('饥人谷');

}

}

***

$btn.on('click', function(){

console.log(this) //this指什么

this.showMsg();

})

这里的this调用者($btn)

修改后：var module= {

bind: function(){

$('#btn').on('click', function(){

console.log(this) //this指什么

this.showMsg()

}.bind(this))

},

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();

***



function Person(name){

this.name = name;

}

var p = new Person("若愚")

//创建空对象作为this

//this.__proto__ = Person.prototype

//运行构造函数

//返回this

![](2.png)

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

自己体内找不到，通过__proto__找，原型上找不到，通过__proto__继续找，知道找到为止



![](prototype.png)

从上图中：原型与原型通过__proto__相连形成原型链

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

var str = 'ahbbccdeddddfg';

var ch = str.getMostOften();

console.log(ch); //d , 因为d 出现了5次

str = 'ahbbccdeddddfg'

String.prototype.getMostOften = function(){

var obj = {}

var num = 0

var sub = ''

for(var i=0;i<str.length;i++){

if(obj[str[i]]){

++obj[str[i]]

}else{

obj[str[i]] = 1

}

}

for(var key in obj){

if(obj[key]>num){

num = obj[key]

sub = key

}

}

return sub+'出现'+num+'次'

}

console.log(str.getMostOften())



String.prototype.getMostOften=function(){

var obj = {}

var num = 0

var s = ''

for(var i =0;i<this.length;i++){

if(obj[this[i]]){

++ob[this[i]]

}else{

obj[this[i]] = 1

}

}

for(var key in obj){

if(obj[key]>num){

s = key

num = obj[key]

}

}

return s + '出现' + num + '次'

}


String.prototype.getMostOften=function(){

var obj = {}

var num = 0

var s = ''

for(var i =0;i<this.length;i++){

if(obj[this[i]]){

++obj[this[i]]

}else{

obj[this[i]] = 1

}

}

for(var key in obj){

if(obj[key]>num){

s = key

num = obj[key]

}

}

return s + '出现' + num + '次,频率最高！'

}

var str = 'ahbbccdeddddfg'

var str = new String() //String.prototype

console.log( str.getMostOften())

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

也叫关系运算符： A instanceOf B B的原型对象出现在A的原型链中返回true

先从自己内部找 没有在通过__proto__到原型上找，原型上没有在通过__proto__在Object的原型上找

![](https://img.haomeiwen.com/i5835943/2f5f010ba5633761.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

继承可以提高代码的重用性。比如要写2个拖拽 ，一个拖拽在视口范围内活动，一个没有限制。利用继承来提高的代码的重用性

子类有继承父类的属性和方法。不需要重复写代码。

如果该改变效果，也可以覆盖原型上的方法，自定义一个。非常灵活

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



方法一和方法二相比，把方法写在构造函数内，

假设有10个士兵，每个士兵都会跑

那我new 10次 在内存中就开辟了10次新的空间

而写在原型上，不但可以节省内存，方法还可以公用

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

使用指定的原型对象和属性创建一个新的对象

function Aa(){}

Aa.prototype.show = function(){}

function Ba(){}

Ba.prototype = Object.create(Aa.prototype)

要写多个继承对象，可使用jq中$.extend()方法进行深度拷贝

<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create">参考地址</a>



对Ie不兼容

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

判断某个对象是否含有指定的值（不包括通过原型链进行查找）

function Tab(name,age){

this.name = name

this.age = age

}

Tab.prototype.show=function(){

console.log(this.name)

}

var obj = new Tab('lii',18)

console.log(obj.hasOwnProperty('name'))//true

console.log(obj.hasOwnProperty('show'))//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;

}


function Male(name, sex, age){

Person.call(this, name, sex);

this.age = age;

}

Person() 会执行

this.name = name

this.sex = sex

当

function Male(name, sex, age){

Person.call(this, name, sex);

this.age = age;

}

这里的this指的是当前对象 就完成了属性拷贝

问题16： 补全代码，实现继承

function Person(name, sex){

this.name = name

this.sex = sex

}

Person.prototype.getName = 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.getName();

<p></p>