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上的属性和方法. 说继承 ...
随机推荐
- 网页设计师神器,快速生成网站配色、字型等风格的工具——Stylify Me
在设计网页时,最重要的一项便是网页的配色,颜色的使用在网页制作中起着非常关键的作用,不同的网站有着自己不同的风格,也有着自己不同的颜色.今天给大家介绍一个在线生成网站配色的工具——Stylify Me ...
- ES6 学习 -- 字符串新增方法
1.检测字符串中是否包含某个字符 ES5方法:string.indexOf("需要检测的字符"),如果返回值为-1,则说明当前字符串中不存在这个字符,返回值不为-1,则 是当前字符 ...
- 【hihocoder】Demo Day
时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 You work as an intern at a robotics startup. Today is your co ...
- Redis本地集群搭建(5版本以上)
Redis本地集群搭建(5版本以上) 2019年11月3日10:05:48 步骤 1.下载安装Redis的安装包 2.复制5份,一共6份Redis的解压安装版,修改每个Redis节点的端口并开启节点 ...
- ipsec原理(转载)
IPSec VPN是目前VPN技术中点击率非常高的一种技术,同时提供VPN和信息加密两项技术,这一期专栏就来介绍一下IPSec VPN的原理.IPSec VPN应用场景 IPSec VPN的应用场景分 ...
- 牛客多校第五场 G subsequence 1 最长公共子序列/组合数
题意: 给定两个由数字组成的序列s,t,找出s所有数值大于t的子序列.注意不是字典序大. 题解: 首先特判s比t短或一样长的情况. 当s比t长时,直接用组合数计算s不以0开头的,长度大于t的所有子序列 ...
- VS中检测数据库链接
在程序中链接数据库,总要为链接语句发愁.可以尝试在链接前,从VS中测试下链接,测试成功的话,可以直接将链接语句复制到程序中. 在VS中,选择“工具”——“连接到数据库”,如下:
- 二分查找总结及部分Lintcode题目分析 1
进行二分查找课程回顾与总结,包括以下几个方面,二分法的模板总结和解题思路.应用. 二分法模板总结classical binary search: 1. 必须要做的排除极端情况,也就是数组(用A表示)不 ...
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- 多重背包 /// 单调队列DP oj1943
题目大意: em.... 就是多重背包 挑战340页的东西 ...自己的笔记总结总是比较乱的 重点:原始的状态转移方程中 更新第 i 种物品时 重量%w[i] 的值不同 则它们之间是相互独立的: 1- ...