三、继承
1、继承是面向对象(OO)语言中的一个概念,许多面向对象语言都支持两种继承方式:接口继承和实现
继承。而ECMAScript中只支持实现继承,而且其现实继承主要依靠原型链来实现的。
2、调用call和apply函数来实现继承
<script type="text/javascript">
//函数的调用方法:既可以使用函数名+小括号的形式调用也可以使用函数名+call()的形式调用
function hello(a,b,c){
console.log(this);
console.log(a);
console.log(b);
console.log(c);
}
//hello();
//hello.call ();
//两种调用方式的区别:
// 小括号调用:如果向小括号中传参数,则该参数一定是函数所需的参数
//call()调用:如果向call的小括号中传参, 则参数一定是一个对象,call会把所调函数中的this指针指
到该参数上;
var per={
name:'xiaoXuan',
age:24
}
hello(per,'12',34);
hello.call(per,per,'12',34);
hello.apply(per,[per,'12',34]);
</script>
3、原型实现继承
<script type="text/javascript">
function CreateAnimal(name,age){
this.name=name;
this.age=age;
}
function CreatePerson(name,age,gender){
this.gender=gender;
}
CreatePerson.prototype=new CreateAnimal('zhangsan',100);
CreatePerson.prototype.constructor=CreatePerson;
var per=new CreatePerson('zhangsan',100,'man');
console.log(per);
</script>
4、组合继承
<script type="text/javascript">
// 使用call/apply实现对实例属性的继承
// 使用原型实现对原型方法的继承
function CreateAnimal(name, age) {
this.name = name;
this.age = age;
}
CreateAnimal.prototype.sayHi = function () {
alert('hello');
}
function CreatePerson(name, age, gender) {
CreateAnimal.call(this, name, age);
this.gender = gender;
}
CreatePerson.prototype = new CreateAnimal();
CreatePerson.prototype.constructor = CreatePerson;
CreatePerson.prototype.eatFood = function () {
alert('吃饭了');
}
var per = new CreatePerson('xiaoQuan', 18, 'man');
// console.log(per.gender);
per.eatFood();
</script>
5、冒充继承
<script type="text/javascript">
function CreateAnimal(name, age) {
this.name = name;
this.age = age;
}
CreateAnimal.prototype.sayHi = function () {
alert('hello');
}
function CreatePerson(name, age, gender) {
// 1、让父级构造函数作为自己对象的方法
this.newFn = CreateAnimal;
// 2、使用this调用该方法:需要让方法中的指针指向per对象
this.newFn(name, age);
// 3、把临时添加的方法删掉
delete this.newFn;
this.gender = gender;
}
var per = new CreatePerson('xiaoQuan', 18, 'man');
console.log(per);
per.sayHi();
</script>
网友评论