js中的继承和重载
js中有三种继承方式:一、通过原型(prototype)实现继承
二、借用构造函数式继承,可分为通过call()方法实现继承和通过apply()方法实现继承
仅仅通过原型继承我们可以发现在实例化子类时无法向父类构造函数中传递参数,call()方法存在于Function对象实例中的原型对象属性中。

var Person = function(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
Person.prototype = {
eat:function(){
console.log("吃饭");
},
say:function(){
console.log("说话");
}
}
// var person = new Person("张三",18,"男");
// console.log(person);
var Programmer = function(name,sex,age){
this.hobby = ["看书","FQ"];
}
Programmer.prototype = new Person();
Programmer.prototype.wirteCode = function(){
console.log("写代码");
}
var prm = new Programmer("李四",18,"男");
console.log(prm);

call()方法作用:1、可以让调用call()方法的对象实例执行(分辨是谁调用就看 "." 前面的对象是谁)。
2、call方法会用其第一个实参替换被调用函数内部中的this指向。
3、call方法可以将其除第一个实参以外的参数传递给被调用函数中。
call()方法和apply()方法区别:1、call()向被调用函数中传递参数须将参数逐个传递;
2、apply()向被调用函数中传递参数需要传递一个数组或者argument对象。
注意:这两个方法功能相同,都是将被调用函数中的this变为第一个实参。

var fn1 = function(name,age){
this.name = name;
this.age = age;
}
fn1.prototype = {
eat:function(){
console.log("OK");
}
}
var fn2 = function(name,age,sex){
fn1.call(this,name,age);
//fn1.apply(this,arguments);
this.sex = sex;
}
var f2 = new fn2("张三",18,"男");
console.dir(f2);


var a = {0:"A",1:"B",2:"C",length:3};
var newa = Array.prototype.slice.call(a);
console.log(newa);
var arr = new Array();
var arr = [1,2,3];
var arr1 = [3,4,5];
var minNum = Math.min.apply(null,[5,2,3,5]);
console.log(minNum);

三、组合式继承(也叫组合寄生式继承):即原型继承+call()或者apply()继承。

var extend = function(obj1,obj2){
for(var attrName in obj2){
//obj1.prototype[attrName] = obj2.prototype[attrName];
obj1[attrName] = obj2[attrName];
}
return obj1;
};
var fn1 = function(name,age){
this.name = name;
this.age = age;
}
fn1.prototype = {
eat:function(){
console.log("OK");
}
}

其优点也很明显,就是在实例化子类时可以向父类构造函数中传递参数,并且父类构造函数只会执行一次(这一次是继承实例属性时发生的)。

var fn2 = function(name,age,sex){
//用call方法继承实例属性
//借用构造函数式继承
fn1.call(this,name,age);
this.sex = sex;
}
//用重写原型属性继承原型属性
//当使用借用构造函数式继承和原型式继承时称为组合式继承
//组合寄生式继承,如下: object(fn2,fn1);
// var object = function(super,sub){
// sub.prototype = extend(sub.prototype,super.prototype);
// }
fn2.prototype = {
say:function(){
console.log("说话");
}
}

重载就是通过参数类型不同或参数个数不同可以让方法实现的功能不同,需要注意的是JS中其实没有真正意义上的重载,但是可以用typeof或argument来进行模拟,从而体现出JS面向对象思想中的重载特性。
由于使用原型式继承时,会覆盖子类原型中原有的属性,所以利用对象循环遍历属性实现属性浅拷贝的功能来解决属性覆盖问题。浅拷贝方法具体看extend函数。另外可以看一下深拷贝的相关内容。
fn2.prototype = extend(fn2.prototype,fn1.prototype);
var f2 = new fn2("张三",18,"男");
//console.log(f2.eat());
console.dir(f2);
js中的继承和重载的更多相关文章
- js中实现继承的几种方式
首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...
- 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承
ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...
- JS中的继承(上)
JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...
- JS中的继承(下)
JS中的继承(下) 在上一篇 JS中的继承(上) 我们介绍了3种比较常用的js继承方法,如果你没看过,那么建议你先看一下,因为接下来要写的内容, 是建立在此基础上的.另外本文作为我个人的读书笔记,才疏 ...
- 浅谈JS中的继承
前言 JS 是没有继承的,不过可以曲线救国,利用构造函数.原型等方法实现继承的功能. var o=new Object(); 其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属 ...
- js中的继承
js中继承的实现方式很多,此处给出两种常用方式. <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> ...
- [置顶] 在js中如何实现方法重载?以及函数的参数问题
都知道在js中没有办法直接实现方法重载,因为在js中如果定义了多个名称相同,但参数个数不一样的方法,其实只有最后一个方法能被真正调用,其他的方法都被覆盖掉了. 但每一个函数都有一个特殊的参数argum ...
- JS中对象继承方式
JS对象继承方式 摘自<JavaScript的对象继承方式,有几种写法>,作者:peakedness 链接:https://my.oschina.net/u/3970421/blog/28 ...
- 详细理解JS中的继承
正式说继承之前,有两个相关小点: JS只支持实现继承,即继承实际的方法,不支持接口继承(即继承方法的签名,但JS中函数没签名) 所有对象都继承了Object.prototype上的属性和方法. 说继承 ...
随机推荐
- CSS 命名规范将省下调试时间
我听说很多开发者厌恶 CSS.而在我的经验中,这往往是由于他们并没有花时间来学习 CSS. CSS 算不上是最优美的『语言』,但迄今二十多年来,它都是美化 web 举足轻重的工具.从这点来说,也还算不 ...
- ionic js 滑动框ion-slide-box 滑动框是一个包含多页容器的组件,每页滑动或拖动切换
ionic 滑动框 ion-slide-box 滑动框是一个包含多页容器的组件,每页滑动或拖动切换: 效果图如下: 用法 <ion-slide-box on-slide-changed=&quo ...
- Linux-iptables-route-rule
详情: http://www.mamicode.com/info-detail-1412618.html 最后面有粘贴 linux系统路由表 linux一共0-255个路由表 linux可以自定义从 ...
- PHP算法之转换成小写字母
实现函数 ToLowerCase(),该函数接收一个字符串参数 str,并将该字符串中的大写字母转换成小写字母,之后返回新的字符串. 示例 1: 输入: "Hello"输出: &q ...
- CI的session操作
在使用session之前,要对配置文件config.php 里面的$config['encryption_key']随便赋个值,例如1234 1. 首先要加载session类,固定写法:$this-& ...
- soj115 御坂网络
题意:平面上有n个A发射点和m个B发射点,可以选择安置相应A/B装置,装置范围是圆,自取半径(要求都相同且<=Rmax).异种要求范围不相交.求装置范围之和(不是并!). 标程: #includ ...
- java变量和数据类型
变量 数据类型 变量名 = 数据值: 注意事项: 变量定义后可以不赋值,使用时再赋值.不赋值不能使用 变量使用时有作用域的限制. 变量不可以重复定义 数据类型转换 自动类型转换 范围大的数据类 ...
- HashMap 什么时候进行扩容呢
HashMap扩容: 当HashMap中的元素越来越多的时候,碰撞的几率也就越来越高(因为数组的长度是固定的),所以为了提高查询的效率,就要对HashMap的数组进行扩容,数组扩容这个操作也会出现在A ...
- sass与less的区别?Stylus又是啥?
现在写样式大家基本上都会用上CSS预处理器,而比较流行的预处理器就是这三位老哥了Less.Sass 和 Stylus: 在这之前,我们先了解一点,sass和scss有什么区别? SCSS 是 Sass ...
- System.Collections.IDictionary.cs
ylbtech-System.Collections.IDictionary.cs 1.程序集 mscorlib, Version=4.0.0.0, Culture=neutral, PublicKe ...