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. bcolz

    raise Exception("this is an ex") bcolz总结: 0.需要用bcolz的columns需要为ndarray的列,不能直接拿list去赋值,因为我发 ...

  2. Let's Encrypt 安装配置教程,免费的 SSL 证书

    官网:https://letsencrypt.org/ 安装Let's Encrypt 安装非常简单直接克隆就可以了 git clone https://github.com/letsencrypt/ ...

  3. curl 基础

    简介 curl 是常用的命令行工具,用来请求 Web 服务器.它的名字就是客户端(client)的 URL 工具的意思. 它的功能非常强大,命令行参数多达几十种.如果熟练的话,完全可以取代 Postm ...

  4. 0924CSP-S模拟测试赛后总结

    50分-rank28 我是第二机房垫底大垃圾. 赛时T1和T2其实想到了正解??安慰自己罢了. 真正的CSP-S的赛后你还能和主办方争论说自己其实想到了正解要求人家硬给你个省一不成?? 出题人不知道到 ...

  5. 模拟求root——cf1067B

    注意最后一轮要单独求一下 且最后只能有一个root #include <bits/stdc++.h> using namespace std; #define MOD 1000000007 ...

  6. 三模数NTT模板

    求两个多项式的卷积对任意数p取模 两个好记的FNT模数: 5*2^25+1 7*2^26+1 原根都为3 //Achen #include<algorithm> #include<i ...

  7. iOS ARC下命名规则

    当我在ARC模式下写以下代码的时候,编译器报错 Semantic Issue: Property's synthesized getter follows Cocoa naming conventio ...

  8. import、export 和 export default

    ES6中 在JavaScript ES6中,export与export default均可用于导出常量.函数.文件.模块等. 你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | ...

  9. low版九九乘法表

    # while循环实现九九乘法表num_one = 1while num_one <= 9: num_two = 1 while num_two <= num_one: print(&qu ...

  10. JDK9新特性实战:简化流关闭新姿势。

    做Java开发的都知道,每个资源的打开都需要对应的关闭操作,不然就会使资源一直占用而造成资源浪费,从而降低系统性能. 关于资源的关闭操作,从JDK7-JDK9有了不少的提升及简化. JDK6 在JDK ...