js中的面向对象、继承、函数重写

通过示例讲解 一下，先看一个示例

示例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 中的实现。

 

结论验证：

 

 

// 子函数的 原型 和 父函数的原型进行比较 ，

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： 谢谢观看，请记得点赞。点赞的人是最帅的，和我一个级别的。