1. apply ,call ,bind有什么作用，什么区别
- 关于 apply call
call(thisObj，arg1，arg2...)，apply(thisObj，[obj1,obj2...])
作用都是一样的，简单来说就是改变当前使用该方法的对象中的this指向，指向调用方法中的thisObj对象。二者的区别（第一个参数是相同的）就是call方法中传入的参数是是一个个列举出来的，而apply方法中的参数二是一个数组
window.color='red';
var o={color:"blue"};
function sayColor(){
console.log(this.color);
};
sayColor(); //red（全局函数，this是window）
sayColor.call(this);//red(调用call方法，指定对象是this，这里的this是window，没什么意义)
sayColor.call(window);//red(调用call方法，指定对象是window，没什么意义)
sayColor.call(o); //blue (调用call方法，指定对象是o，所以this指代对象o，这里由原来的window指向了o)
sayColor.apply(o);//blue (调用call方法，指定对象是o，所以this指代对象o，这里由原来的window指向了o)
- call,apply常用用法：
1.数组之间的追加；
2.获取数组中的最大值和最小值，利用他们扩充作用域拥有Math的min和max方法；
由于没有什么对象调用这个方法，所以第一个参数可以写作null或者本身；
var num = [1,4,23,7,8,10];
var maxNum = Math.max.apply(Math,num),//23
minNum = Math.min.call(Math,1,4,23,7,8,10)//1
3.验证是否是数组（前提是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
4.让类数组拥有数组的方法
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--也是改变函数体内this的指向;
bind会创建一个新函数，称为绑定函数，当调用这个函数的时候，绑定函数会以创建它时传入bind（）方法的第一个参数作为this，传入bind（）方法的第二个及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数；
var name = 'yyyyy';
var obj1 = {
name:'zyn',
fn:function(){
console.log(this.name)
}
}
obj1.fn()//谁调用函数谁就是this zyn
var obj2 ={
name : 'zyg',
obj3:{
name:'zzz',
fn :function(){
console.log(this.name)
}
}
}
obj2.obj3.fn(); //obj3调用函数this指向obj3 zzz
var fn2 = obj1.fn
fn2();//this指向window
var obj4 = {name :3}
var fn3 =obj1.fn.bind(obj4);
fn3()//bind改变thsi指向obj4
document.addEventListener('click',function(){
console.log(this)//this指向document
//var _this =this //保存this指向
setTimeout(function(){//setTimeout、setInterval这两个方法执行的函数this也是全局对象
console.log(this);
//console.log(_this);//由于保存this指向所以this指向了document
}.bind(this),200)//this指向document;改变了setTimeout里this的指向
})
- 关于三者：
1.都是用来改变函数的this对象的指向的；
2.第一个参数都是this要指向的对象；
3.都可以利用后续参数传参；
4.bind是返回对应函数，便于稍后调用，apply、call是立即调用；
var fn = {
int:2,
fun:function(){
document.getElementById('box').onclick =(function(){
console.log(this);//本身this指向为box
}).bind(this);//call(this);apply(this)//改变this，this指向fn
//使用bind会在点击是打印this--fn;
//如果使用call,apply,那么在刷新时就会打印this--fn
}
}
fn.fun();
2.关于this指向问题
1.在函数被直接调用时this绑定到全局对象。在浏览器中，window 就是该全局对象
作为函数调用
console.log(this);//this指向window
function fn1(){
console.log(this);//this指向window
}
fn1();
2.函数嵌套产生的内部函数的this不是其父函数，仍然是全局变量
内部函数
function fn0(){
function fn(){
console.log(this);//this指向window
}
fn();
}
fn0();
3.setTimeout、setInterval
这两个方法执行的函数this也是全局对象
DOM对象绑定事件
在事件处理程序中this代表事件源DOM对象（低版本IE有bug，指向了window
document.addEventListener('click', function(e){
console.log(this);//this 指向doucment
setTimeout(function(){
console.log(this);//this 指向window
}, 200);
}, false);
4.来做下关于this的练习
(1)以下代码输出什么?
ar john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()//弹出John:h1! ; 谁调用了函数this就指向谁；john对象调用了函数this指向john对象
(2)下面代码输出什么，为什么
func() //全局调用函数 = Window.func() 相当于window调用了函数，所以this指向window
function func() {
console.log(this)
}
(3)下面代码输出什么;怎样改能都输出document.?
document.addEventListener('click', function(e){
console.log(this);// DOM对象绑定事件;在事件处理程序中this代表事件源DOM对象（低版本IE有bug，指向了window)
setTimeout(function(){
console.log(this);//setTimeout、setInterval;这两个方法执行的函数this也是全局对象
}, 200);
}, false);
改为：
document.addEventListener('click', function(e){
var _this = this//保存document的this
console.log(this);
setTimeout(function(){
console.log(_this);//传入document的this
}, 200);
}, false);
或者改变作用域：
document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}.bind(this), 200);//this指向document;改变了setTimeout里this的指向
}, false);
(4)下面代码输出什么，why?
var firstName = 'zyn';
var john = {
firstName: "jasonynll"
}
function func() {
alert( this.firstName )
}
func.call(john)//call(john)改变了this的指向，指向了john对象里的this；所以弹出jasonynll
//func();如果是这样this指向全局；所以弹出zyn
</script>
(5)以下代码有什么问题，如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指向的是$btn
this.showMsg();//当点击时执行this.showMsg()时$btn没有.showMsg的方法会报错
//应该让this指向module这样当点击按钮是才会打印jasonynll
})
},
showMsg: function(){
console.log('jasonynll');
}
}
//改为
var module= {
bind: function(){
var _this = this //保存module的this
$btn.on('click', function(){
console.log(this)
_this.showMsg(); //这时的this指向module，才会调用showMsg方法
})
},
showMsg: function(){
console.log('jasonynll');
}
}
3.原型链相关问题
1.有如下代码，解释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("jasonynll")
p.sayName();
Person是构造函数，也是一个对象，这个对象里面存在一个prototype属性，而构造函数内部定义了实例的属性和方法，这些属性和方法是属于该类的所有实例的特征；
p是通过构造函数Person构造出来的实例，也是拥有__proto__属性。所以p.__proto__ === Person.prototype;
prototype是构造函数内部的原型对象，所以拥有contructor和__proto__属性，其中contructor属性指向构造函数Person，__proto__指向该对象的原型，即
// Person.prototype.__proto__ === Object.prototype;
// Person.prototype.constructor == Person
QQ截图20170414170057.jpg
2.上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。
-
toString是哪里来的
p.toString()方法是继承构造函数Object的原型对象里定义的toString方法，首先p会找自己的toString方法，如果没有找到，会沿着 --proto--属性继续到构造函数Person的prototype里找toString方法，如果还未找到，再继续往Person.prototype的--proto--即Object.prototype找toString方法，最后找到toString()方法。 -
什么是原型链。
由于原型对象本身也是对象，而每个javascript对象都有一个原型对象，每个对象都有一个隐藏的proto属性，原型对象也有自己的原型，而它自己的原型对象又可以有自己的原型，这样就组成了一条链，这个就是原型链。在访问对象的属性时，如果在对象本身中没有找到，则会去原型链中查找，如果找到，直接返回值，如果整个链都遍历且没有找到属性，则返回undefined。原型链一般实现为一个链表，这样就可以按照一定的顺序来查找。 -
原型链图表：
QQ截图20170414170937.jpg
3.对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]){//如果存在，对应的值+1；
obj[k] ++
}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
String.prototype.getMostOften = function(){
var obj = this.split("");//把字符串变成数组；
var result = obj.reduce(function(obj,value){
if(obj[value]){
obj[value]++
}else{
obj[value] = 1
}
return obj;
},{});//reduce()ES5方法；数组求和 传入空对象obj
//arr.reduce(function (preValue,curValue,index,array) { return preValue + curValue; }, 5);
//preValue: 上一次调用回调返回的值，或者是提供的初始值（initialValue）
// curValue: 数组中当前被处理的数组项
// index: 当前数组项在数组中的索引值
// array: 调用 reduce()方法的数组
var max = 0,k;
for(var key in result){
if (result[key]>max){
max = result[key];
k = key
}
}
return k;
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d
4.instanceOf有什么作用？内部逻辑是如何实现的？
instanceOf 是一个运算符。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
其内部逻辑是判断A和B是否处在同一条原型链上
function isInstanceOf(obj, fn){
var objpro = obj.__proto__;
do{
if(objpro === fn.prototype){
return true;
}
else {
objpro = objpro.__proto__;
}
}while(objpro)
return false;
}
4.继承相关问题
1.继承有什么作用?
- 概念：继承是指一个对象直接使用另一个对象的属性和方法。
- 作用：
1.继承划分了类的层次性，父类代表的是更一般、更泛化的类，而子类则是更为具体、更为细化；
2.子类拥有父类的属性和方法，不需要重复写代码，修改时也只需修改一份代码.
3.可以重写和扩展父类的属性和代码，又不影响父类本身。
2.下面两种写法有什么区别?
//方法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作为构造函数的方法，实例在进行调用的时候是调用的自身的方法，较为消耗内存。方法二是将printName作为构造函数原型的方法，所有实例共享这个方法。
3.Object.create 有什么作用？兼容性如何？
- 作用：创建一个拥有指定原型和若干个指定属性的对象。
- 兼容性：
QQ截图20170415124948.jpg
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
console.log(this.name);
}
function Male(name, age, sex){
Person.call(this, name, age);
this.sex = sex;
}
// Male.prototype = new Person(); //该方法同下，代替不兼容Object.create()的使用场景
Male.prototype = Object.create(Person.prototype);
Male.prototype.constructor = Male;
Male.prototype.sayAge = function(){
console.log(this.age);
};
var p1 = new Male('hunger', 20, 'nan');
p1.sayName();//hunger
p1.sayAge();//20
5.hasOwnProperty有什么作用？ 如何使用？
- 作用：obj,hasOwnProperty(pro) 判断某个对象是否含有指定的属性但是该方法会忽略掉那些从原型链上继承到的属性。
function People(){
this.name='zyn'
}
People.prototype.sayName=function(){console.log(this.name)}
var p = new People()
p.hasOwnProperty('name')//true
p.hasOwnProperty('sayName')//false
6.如下代码中call的作用是什么?
function Person(name, sex){
this.name = name;
this.sex = sex;
}
function Male(name, sex, age){
Person.call(this, name, sex); //这里的 call 有什么作用//让Male创建的实例能够继承Person上的属性。
this.age = age;
6.补全代码，实现继承
function Person(name, sex){
// todo ...
}
Person.prototype.getName = function(){
// todo ...
};
function Male(name, sex, age){
Person.call(this,name,'sex')
}
Male.prototype=Object.create(Person.protorype)
Male.prototype.getAge = function(){
//todo ...
};
var p = new Male('zyn', '男', 27);
p.printName();
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.getName = function(){
console.log('name:'+ 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('age:'+ this.age)
};
var p= new Male('zyn', '男', 27);
p.getName();
希望对给位朋友有所帮助~~~
版权归饥人谷--楠柒所有如有转发请注明出处 谢谢~~
网友评论