通过示例讲解 一下,先看一个示例
示例demo:
<
script>
//创建一个父函数(父类)
var
Mammal
=
function (
name) {
this.name
= name;
}
/*
给父函数的原型添加相应的方法。
注意: 函数原型中方法,以该函数为构造函数创建的所有对象均可访问。
即 : var mmm = new Mammal(); mmm可以访问 Mammal 函数中所有的方法
*/
Mammal.prototype.
get_name
=
function () {
return
this.name;
}
Mammal.prototype.
says
=
function () {
return
this.saying
||
" ";
}
/*
用new 调用父函数,会返回一个 用objec创建的对象,存储在变量 myMammal中
*/
var myMammal
=
new
Mammal(
"herb the mammal");
console.
log(myMammal);
/*
创建子函数(子类。要继承父类的函数)
*/
var
Cat
=
function (
name) {
this.name
= name;
this.saying
=
"meow";
}
/*
用父类返回的对象替换 子类 的原型prototype。(父类返回的对象可以访问父类所有的方法)
因为用子类 Cat函数 new 的对象可以访问 cat 原型中所有的方法,而 子函数的原型又指向 父函数的对象, 父函数的对象可以访问父函数的方法。
即: 子函数的原型 指向了 父函数的 原型,这样,子函数 new 的对象就可以 访问 父类中的方法了。这样就实现了继承
*/
Cat.prototype
= myMammal;
/*
通过 给子函数原型增加新的方法,来 增加 子类的功能。(即类的拓展)
*/
Cat.prototype.
purr
=
function (
n) {
var i,s
=
'';
for(
var i
=
0;i
< n;i
++){
if(s){
s
+=
'-';
}
s
+=
'r';
}
return s;
}
/*
因为父函数中也有 get_name方法,给子函数的原型中增加 同名的 方法,这样 对象访问的时候 回 访问到 子函数 的get_name
即: 成员方法的重写
*/
Cat.prototype.
get_name
=
function () {
return
this.
says()
+
' '
+
this.name
+
" "
+
this.
says();
}
var myCat
=
new
Cat(
"lihongwei");
console.
log(myCat);
</
script>
运行结果:
我们看到 父函数 Mammal 和 子函数 Cat 用new调用时,分别产生的对象的结构。
子函数 的第一层__proto__是自己原型中方法 。第二层 的 __proto__中的方法是继承自父函数 Mammal函数原型中的方法。
这就是 继承在 js 中的实现。
结论验证:
扫描二维码关注公众号,回复:
871316 查看本文章
// 子函数的 原型 和 父函数的原型进行比较 ,
console.
log(
myCat.prototype
===
myMammal.prototype)
// true
在一次说明了 子函数 原型 是指向 父函数的原型,并可以i访问其中的方法。这就是 js中的继承。
js中子函数的拓展:
/*
通过 给子函数原型增加新的方法,来 增加 子类的功能。(即类的拓展)
*/
Cat.prototype.
purr
=
function (
n) {
var i,s
=
'';
for(
var i
=
0;i
< n;i
++){
if(s){
s
+=
'-';
}
s
+=
'r';
}
return s;
}
js中子函数 对父函数 方法的重写:
/*
因为父函数中也有 get_name方法,给子函数的原型中增加 同名的 方法,这样 对象访问的时候 回 访问到 子函数 的get_name
即: 成员方法的重写
*/
Cat.prototype.
get_name
=
function () {
return
this.
says()
+
' '
+
this.name
+
" "
+
this.
says();
}
ps: 谢谢观看,请记得点赞。点赞的人是最帅的,和我一个级别的。