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上的属性和方法. 说继承 ...
随机推荐
- 2019-10-9-dotnet-不申请额外数组空间合并多个只读数组列表
title author date CreateTime categories dotnet 不申请额外数组空间合并多个只读数组列表 lindexi 2019-10-09 15:15:10 +0800 ...
- php代码post请求
<?php /** * 发送post请求 * @param string $url 请求地址 * @param array $post_data post键值对数据 * @return stri ...
- 线程池ThreadPoolExecutor工作原理
前言 工作原理 如果使用过线程池,细心的同学肯定会注意到,new一个线程池,但是如果不往里面提交任何任务的话,main方法执行完之后程序会退出,但是如果向线程池中提交了任务的话,main方法执行完毕之 ...
- leetcode-216-组合总和③
题目描述: 方法一:回溯 class Solution: def combinationSum3(self, k: int, n: int) -> List[List[int]]: res = ...
- 网页存储倒计时与解决网页cookie保存多个相同key问题
短信倒计时多用网页临时存储,这可以保证网页在关闭状态也可记时. <p class="test_button" id="getcode">获取验证码& ...
- text-html 转译
var HtmlUtil = { 2 /*1.用浏览器内部转换器实现html编码(转义)*/ 3 htmlEncode:function (html){ 4 //1.首先动态创建一个容器标签元素,如D ...
- linxu(centos)安装nginx
安装make: yum -y install gcc automake autoconf libtool make 安装g++: yum install gcc gcc-c++ 下面正式开始 ---- ...
- C#,判断数字集合是否是连续的
/// <summary> /// 判断数字集合是否是连续的 /// </summary> /// <returns></returns> public ...
- VS2010-MFC(菜单:VS2010菜单资源详解)
转自:http://www.jizhuomi.com/software/210.html 上一节讲了标签控件Tab Control以后,常用控件的内容就全部讲完了,当然并没有包括所有控件,主要是一些很 ...
- <day004>小娜显示空白+CSV文件的基本操作+普通的代理使用
小知识: 当小娜搜索显示空白的时候,怎么解决? 任务管理器结束小娜进程就好了= =*(多半是惯得,关掉就好了!) 任务1:CSV文件的基本操作 import csv import pandas as ...