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中的继承和重载的更多相关文章

  1. js中实现继承的几种方式

    首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的 ...

  2. 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承

    ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...

  3. JS中的继承(上)

    JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之 ...

  4. JS中的继承(下)

    JS中的继承(下) 在上一篇 JS中的继承(上) 我们介绍了3种比较常用的js继承方法,如果你没看过,那么建议你先看一下,因为接下来要写的内容, 是建立在此基础上的.另外本文作为我个人的读书笔记,才疏 ...

  5. 浅谈JS中的继承

    前言 JS 是没有继承的,不过可以曲线救国,利用构造函数.原型等方法实现继承的功能. var o=new Object(); 其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属 ...

  6. js中的继承

    js中继承的实现方式很多,此处给出两种常用方式. <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> ...

  7. [置顶] 在js中如何实现方法重载?以及函数的参数问题

    都知道在js中没有办法直接实现方法重载,因为在js中如果定义了多个名称相同,但参数个数不一样的方法,其实只有最后一个方法能被真正调用,其他的方法都被覆盖掉了. 但每一个函数都有一个特殊的参数argum ...

  8. JS中对象继承方式

    JS对象继承方式 摘自<JavaScript的对象继承方式,有几种写法>,作者:peakedness 链接:https://my.oschina.net/u/3970421/blog/28 ...

  9. 详细理解JS中的继承

    正式说继承之前,有两个相关小点: JS只支持实现继承,即继承实际的方法,不支持接口继承(即继承方法的签名,但JS中函数没签名) 所有对象都继承了Object.prototype上的属性和方法. 说继承 ...

随机推荐

  1. js只能输入数字和小数点

    1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafter ...

  2. C#让两个长度相同的数组一一对应

    比如: string a[]={"x","y","z"} "} 用字典使其一一对应 Dictionary<string, s ...

  3. Estimation

    Estimation 给出一个长度为n序列\(\{a_i\}\),将其划分成连续的K段,对于其中一段\([l,r]\),设其中位数为m,定义其权值为\(\sum_{i=l}^r|m-a_i|\),求最 ...

  4. Mysql ---Sqlserver数据迁移到Mysql(Mysql建表迁移数据)

    1 试用了MysqlWorkBench的数据迁移功能 以为能实现:建立跟Sqlserver一样的表结构和视图的功能,sqlserver的数据迁移到mysql 实际上发现:即使勾选了表和视图,实际上却只 ...

  5. 阿里云POLARDB如何帮助猿辅导打造“孩子喜欢老师好”的网课平台?

    海量的题库.音视频答题资料.用户数据以及日志,对猿辅导后台数据存储和处理能力都提出了严峻的要求.而由于教育辅导行业的业务特点,猿辅导也面临着业务峰值对于数据库能力的巨大挑战.本文就为大家介绍阿里云PO ...

  6. POJ 3134 - Power Calculus

    迭代加深 //Twenty #include<cstdio> #include<cstdlib> #include<iostream> #include<al ...

  7. golang中time包一个简单的时间格式输出

    一.代码 package main import ( "fmt" "time" ) func main() { //"2006-01-02 15:04 ...

  8. springboot下自定义配置文件,并在项目里读取的方法

    首先 pom文件引入springboot文件处理器 <dependency> <groupId>org.springframework.boot</groupId> ...

  9. JavaScript的函数进阶

    函数进阶 1立即执行函数表达式 立即执行的函数表达式的英文全称为Immediately Invoked Function Expression,简称就为IIFE.这是一个如它名字所示的那样,在定义后就 ...

  10. myeclipse CTRL+1功能

    有时候,在myeclipse或者eclipse中自动编译代码有错误,我们把鼠标放在错误一行能够自动显示出问题原因,但是有时显示问题让人有些匪夷所思,不知所云何物. 此时可以使用<ctrl> ...