高级任务2---this_原型链_继承
2017-02-10 本文已影响41人
饥人谷_小敏
this 相关问题
问题1： apply、call 有什么作用，什么区别
call apply，调用一个函数，传入函数执行上下文及参数
fn.call(context, param1, param2...)
fn.apply(context, paramArray)
语法很简单，第一个参数都是希望设置的this对象，不同之处在于call方法接收参数列表，而apply接收参数数组
问题2： 以下代码输出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
输出： 因为函数内部this指向john这个对象
问题3： 下面代码输出什么，为什么
func()
function func() {
alert(this)
}
输出：this指代window对象
问题4：下面代码输出什么
document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}, 200);
}, false);
输出：第一个this指向document,setTimeout中的this指向window。
问题5：下面代码输出什么，why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
输出：通过函数call，使得传入到func的this值为john
问题6： 以下代码有什么问题，如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么
this.showMsg();
})
},
showMsg: function(){
console.log('饥人谷');
}
}
存在的问题：
$btn.on函数内部的this指代$btn，因此无法找到showMsg函数。更改如下：
var module= {
bind: function(){
var _this=this;
$btn.on('click', function(){
console.log(this) //this指什么
_this.showMsg();
})
},
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();
关联如下：
问题8： 上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。
toString是从Object.prototype中找到的。当调用p.toString()时，p会检查自身是否有这个函数，如果有则直接调用，如果没有，则从p.__proto__中查找，如果还没有找到，则从原型对象.__proto__中寻找。原型链：
其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都有一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么，假如我们让原型对象等于另一个类型的实例，结果会怎么样呢？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条。这就是所谓原型链的基本概念。
问题9：对String做扩展，实现如下方式获取字符串中频率最高的字符
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
代码：
String.prototype.getMostOften=function () {
var strArr=[],
maxTimes=0,
times=0,
maxChar="",
_this=this;
for(var i=0;i<this.length;i++){
if($.inArray(this[i],strArr)<0){
strArr.push(this[i]);
}
}
strArr.forEach(function (e,i,array) {
var reg=new RegExp(array[i],"g");
times=_this.match(reg).length;
if(times>maxTimes){
maxTimes=times;
maxChar=array[i];
}
})
return maxChar;
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次
问题10： instanceOf有什么作用？内部逻辑是如何实现的？
obj instanceof func
判断一个对象是否为给定引用类型的实例。内部逻辑是判断该对象的原型链上是否存在func.prototype。
function isinstanceof(obj,func){
var oldObj=obj.__proto__;
do{
if(oldObj === func.prototype){
return true;
}else{
oldObj=oldObj.__proto__;
}
}
while(oldObj);
return 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);
方法1中每创建一个People实例都会创建一个printName函数。而方法2中所有实例共享printName函数，从而节省资源。
问题13： Object.create 有什么作用？兼容性如何？
Object.create()方法创建一个拥有指定原型和若干个指定属性的对象。
objA=Object.create(objB.prototype)
会使得objA.__proto__ = objB.prototype
function Person(name, sex){
this.name = name;
this.sex = sex;
}
Person.prototype.printName = function(){
console.log(this.name);
};
function Male(age){
this.age = age;
}
Male.prototype=Object.create(Person.prototype);
Male.prototype.printAge = function(){
console.log(this.age);
};
上述代码会使得Male.prototype.__proto =Person.prototype。
问题14： hasOwnProperty有什么作用？ 如何使用？
hasOwnPerperty可以判断⼀个对象是否包含⾃定义属性而不是原型链上的属性。
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;
}
function inherit(superType, subType){
var _prototype = Object.create(superType.prototype);
_prototype.constructor = subType;
subType.prototype = _prototype;
}
inherit(Person, Male);
// 在继承函数之后写⾃⼰的⽅法，否则会被覆盖
Male.prototype.printAge = function(){
console.log(this.age);
};
var m = new Male('Byron', 'm', 26);
m.hasOwnProperty('name'); // true
m.hasOwnProperty('printName'); // false
Male.prototype.hasOwnProperty('printAge'); // true
问题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;
}
使得Male的实例拥有Person的属性，从而不必再为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;
}
function inherit(superType,subType) {
subType.prototype=Object.create(superType.prototype);
subType.prototype.constructor=subType;
}
inherit(Person,Male);
Male.prototype.getAge = function(){
console.log(this.age);
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName();
