this_原型链_继承 this_原型链_继承

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

bind，apply，call：都是返回一个函数，用括号里的参数改变原本this的指向。

var obj3 = {name:'cwn'} function obj(){ console.log(this) } obj()//window this指向了window obj.bind(obj3)()//指向了obj3，bin改变了this的指向，但是并不是执行了函数

var obj3 = {name:'cwn'} function obj(a,b){ console.log(this.name + a + b) } obj(2,3)//23 obj.call(obj3,2,3)//cwn23 可以传递参数，第一个参数就是this指向的对象，并且立即执行函数 obj.apply(obj3,[2,3])//和call一样，只不过传递的参数不一样

bind：不能立即执行，只是改变了this的指向。
call：执行了函数，并且改变了this的指向，还能传递参数
apply：传递参数的方式以数组形式传递。其他和call一样
问题2：以下代码输出什么?

var john = { firstName: "John" } function func() { alert(this.firstName + ": hi!") } john.sayHi = func john.sayHi() // 输出了John hi //在john新建了属性，func，this的指向自然会改变指向john对象，所以输出了John hi

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

func() function func() { alert(this) } //window //this指向的是全局的window

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

document.addEventListener('click', function(e){ console.log(this); //document对象 setTimeout(function(){ console.log(this); //window对象 }, 200); }, false); //第一个this指向的是点击的元素 //第二个this找自己作用域的this，找不到向上找，也找不到，自然指向全局作用域的this

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

var john = { firstName: "John" }function func() { alert( this.firstName ) } func.call(john)//John //call改变了func里this的指向，指向了john对象

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

var module= { bind: function(){ $btn.on('click', function(){ console.log(this) //this指什么：被点击的元素 this.showMsg(); }) },showMsg: function(){ console.log('饥人谷'); } }

【this_原型链_继承】修改

var module= { bind: function(){ var _this = this //把this赋值到变量上 $('.but').on('click', function(){ console.log(this) //this指$btn _this.showMsg(); //this指向$btn,$btn没有showMsg方法 }) },showMsg: function(){ console.log('饥人谷'); } } module.bind()//或者var module= { bind: function(){ $('.but').on('click', function(){ console.log(this) this.showMsg(); }.bind(this))//改变指向 },showMsg: function(){ console.log('饥人谷'); } } module.bind()

原型链相关问题
问题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函数
在Person函数里有一个prototype属性，这个属性指向原型对象。
在原型对象里创建一个属性sayName
通过new关键字构造对象，并且赋值给p，p里面的_proto_也指向了prototype原型对象。
原型对象中，有一个constructor属性，他指向回，函数Person。
所以
p1._proto_.constructor === Person
p1._proto_ === Person.prototype

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

文章图片
Paste_Image.png 问题9：对String做扩展，实现如下方式获取字符串中频率最高的字符

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

String.prototype.getMostOften = function(){ var wrap = {} var num = 0 var str ='' for(var i = 0; inum) { num = wrap[x] str = x } } return str } var str = "aaaa4564bbbbbccccccccc" var ch = str.getMostOften() console.log(ch) //c

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

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

继承相关问题
问题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是在函数People中创建，p1继承的是Person的里的属性和方法。
方法二：方法printName是在Person的原型里添加创建。printName是一个公用方法。达到了节省内存的效果。

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

作用：创建一个拥有指定原型和若干个指定属性的对象。

例子： function Person(name){ this.name = name } Person.prototype.look = function(){ console.log(123) } var p = new Person('ruoyu')function Student(name){ Person.call(this,name) } Student.prototype = Object.create (Person.prototype)//相当于Student.prototype.__proto__ =Person.prototypevar s = new Student('cwh')

兼容性：

文章图片
Paste_Image.png

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

作用：判断一个对象是不是自己本身拥有该属性和方法。

function Person(name, sex){ this.name = name; this.sex = sex; }Person.prototype.printName = function(){ console.log(this.name); } var p1 = new Person('若愚', 27); p1.hasOwnProperty('name')//true p1.hasOwnProperty('printName')//false 因为printName是在p1的原型上

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

调用Person的方法，不过this指针指向Male，并传入了Male自己的参数。
问题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 = MaleMale.prototype.getAge = function(){ console.log(this.name) }; Male.prototype.printName = function(){ console.log(this.name) }; var ruoyu = new Male('若愚', '男', 27); ruoyu.printName();