本人目录如下:
零、寒暄&回顾
上次博客跟大家分享了自己对原型链继承的理解,想看的同学欢迎猛击这里,上次说到原型链继承有一些问题,主要是两方面的。我们举个栗子来说明下:
Q1:共享的超类属性能被任何实例改写,这个是很危险的!看下面一段代码:
function Person(name){
this.name=name;
this.countries=["America","China","Canada"];
}
Person.prototype.sayName=function(){
return this.name;
}
function Student(age){
this.age=age;
} Student.prototype=new Person(); var s1=new Student();
s1.countries.push("india");
console.log(s1.countries);//["America", "China", "Canada", "india"]
var s2=new Student();
console.log(s2.countries);//["America", "China", "Canada", "india"]
大家看到,我对s1对象的countries熟悉进行了修改,但是当我new出另外一个Studnet实例的时候,你会发现它的counties属性也被修改了。这段代码说明,从表面上看,任何对实例属性的修改,都会反映到其他实例上。
那么怎么解释这样的现象呢?用一张图来简要的说明下
大家可以看到,其实当把Person的实例赋给Student的原型后,countries属性其实已经存在了Student的原型对象中。而此时s1,s2实例均是指向Student的原型对象的,所以不论你怎么更改countries,都会反映到原型对象中的countries值中。这样就解释了为什么s2的countries属性也会被修改。
接下来,我们来看原型链继承的第二个问题:
Q2:在创建子类型的实例时,不能向超类型的构造函数中传递参数;看下面的一段代码:
function Person(name){
this.name=name;
this.countries=["America","China","Canada"];
}
Person.prototype.sayName=function(){
return this.name;
}
function Student(name,age){
this.age=age;
} Student.prototype=new Person(); var s1=new Student("bob",25); console.log(s1.name);//undefined
当我打印s1的name属性时,是undefined,这就是第二个问题的描述!好了,既然有问题,我们就来解决!
一,借用构造函数
function Person(name){
this.name=name;
this.countries=["America","China","Canada"];
} function Student(name,age){
Person.call(this,name);//在这里借用了Person的构造函数
this.age=age;
} var s1=new Student("bob",25);
s1.countries.push("india");
console.log(s1.countries);//["America", "China", "Canada", "india"]
console.log(s1.name);//bob
var s2=new Student("finnya",23);
console.log(s2.countries);//["America", "China", "Canada"]
console.log(s2.name);//finnya
从上面的代码中可以看到,通过是用call()方法(或者apply()方法),我们就是在Student实例的环境下调用了Person构造函数。这样一来,新的Student对象中就有了Person构造函数里面的初始化代码。结果就是Student的每个实例当中都有了countries属性的副本。
function Person(name){
this.city="北京";
this.name=name;
this.countries=["America","China","Canada"];
} function Student(name,age){
this.city="上海";
Person.call(this,name);
this.age=age;
//this.city="上海";//如果将新增属性放在借用函数以后,就不会出现这个问题
} var s1=new Student("bob",25);
s1.countries.push("india");
console.log(s1.city);//这里输出的是北京,前面新增的Student实例属性并没有体现出来
到此为止,关于借用构造函数的继承方法已经完成了。但是,细心的同学会发现,借用构造函数方法也有它自己弊端,因为每一个子类的对象实例都拥有自己的实例属性,这样一来函数复用就无从谈起了。而且在超类型的原型中定义的方法,对子类型而言也是不可见的。所以,其实我们一般在实现继承的过程中,都不会单纯的使用这种继承模式。那么这个问题怎么解决呢?请大家接着看下面一部分:
二,组合式继承
function Person(name){
this.name=name;
this.countries=["America","China","Canada"];
} Person.prototype.sayName=function(){
return this.name;
} function Student(name,age){
Person.call(this,name);
this.age=age;
} Student.prototype=new Person();
Student.prototype.sayAge=function(){
return this.age;
}
var s1=new Student("bob",25); s1.countries.push("india");
console.log(s1.countries);//["America", "China", "Canada", "india"]
console.log(s1.name);//bob
console.log(s1.sayAge())// var s2=new Student("finnya",23);
console.log("------------------------");
console.log(s2.countries);//["America", "China", "Canada"]
console.log(s2.name);//finnya
console.log(s2.sayAge())//23
通过上面的例子,可以看到,当我们把两种继承的方式融合到一起以后,Student实例分别拥有了各自的name,countries属性,又共享了Person的原型方法sayName。所以说,组合继承避免了原型链和借用构造函数的缺点,融合了各自的优点。当然,这里我们仍然可以使用之前谈到的两种方法去检测实例和原型的关系,instanceof和isPrototypeOf(),具体怎么检测和其中的问题,请大家参考我之前一篇博客----原型链式继承。
好了,到这里,关于继承的事情基本谈完了,下面说一下一个知识扩充:
三,call和apply的用法
function foo(){
alert(1);
}
foo();
//同时,也可以这么调用
foo.call();
那么这里怎么解释这样的写法呢?前面我用红色的字体标记过一句话”函数只不过是在特定的环境中执行代码的对象“,我们使用call调用时,call函数的本质是需要执行这个函数的(这里可以联想到另外一个方法bind,它只是绑定函数并生成一个新的函数,并不去执行,大家一定要注意,有时间,我会将这个函数进行扩展!),那么其实这里相当于在window域里面去调用foo函数,所以这个问题就迎刃而解了,只是调用函数的一种方式而已。
({}).toString.apply(‘str’);//这里返回的是[object String]
上面的这种用法,一般是用来检测一个对象的类型,通常,
({}).toString.call([Class]);//返回的是[object Class],传入的参数不一样,出现的Class就不一样
说白了,我们前面的一段代码可以这样理解,我下面只是一个伪代码,可以这样去理解,但真正的结果还是有区别的!!!!
var str="str";
str.toStirng();
关于更多的理解,本文篇幅有限,有时间我会再去补充,大家有什么疑问,可以给我留言!
var arr1=["a","b","c"];
var arr2=["d","e","f"];
// arr1.push(arr2)
// console.log(arr1);//["a", "b", "c", Array[3]]
Array.prototype.push.apply(arr1,arr2);
console.log(arr1);//["a", "b", "c", "d", "e", "f"]
上面的第一种调用方法中只是把arr2整个数组加到了arr1中,但是第二种调用方式,能够出现正常的结果!什么原因呢?因为大家知道,apply方法的第二个参数是一个数组,这里在方法内部,肯定是是实现了一个数组循环,然后把数组中每个值分开进行push操作,这里正是利用了apply方法的这个特性,将arr2自动循环解析。
var arr1=["1","2","3"];
console.log(Math.max(arr1));//NaN
console.log(Math.max.apply(arr1)); //-Infinity
console.log(Math.max.apply(null,arr1));//
大家看上面的第一个调用,可以知道,其实Math.max()只能接受(1,,2,3)这样一个一个的值,传入数组时,它是没法工作的。这里我们想要Math.max()能够处理数组,那么只能请回apply来处理了,它能够将传入的数组,变成一个接一个的参数的形式,这样Math.max()就能够返回正常的最大值了。
四、总结
PS:本文中的图片水印,是本人csdn的博客搬家到cnblogs所致,请大家不要误解本人抄袭!
http://www.cnblogs.com/rookiebob/,有些勘误我会及时更正,为了避免对您的误解,请访问原文!