今天给自己巩固一下js的继承知识,基础不好,有不对的地方,请尽量拍砖,越重越好。

js继承方法最主要的是2种,一种是通过原型的方式,一种是通过借用call&apply的构造函数方式。

1.原型(prototype):

 function Body(name,age){// 创建一个Body类
     this.name = name;// 赋予基础属性name、age
     this.age = age;
 }
 Body.prototype.sayName =function() {// 给原型定义一个sayName的方法
     console.log(this.name);
 }
 var a = new Body('wutao','10');//创建一个Body的实例对象

 function Another(){}
 Another.prototype = new Body('www');//将Body实例对象给新创建的子类(Another)的prototype属性,这样,Another就拥有了Body的属性和方法
 var b = new Another();//创建Another子类的实例
 Another.prototype.sex ="mail";//定义子类的属性及方法
 Another.prototype.saySex = function(){
     console.log(this.sex);
 }
 a.sayName();//wutao
 b.sayName();//www 实例b拥有父类Body的方法sayName
 b.saySex();//mail 实例b拥有自己定义的方法saySex

2.借用构造函数(call&apply),也可以理解为组合式继承

call:

 function Person(name){
     this.name = name;
     this.sayHello = function(){
         console.log(this.name);
     }
 }

 function Son(name,age){
     Person.call(this,name,age);//call用法:将this指针指向父类构造函数,并依次传入参数,使其拥有父类的属性和方法
     this.age = age;
     this.sayFunc = function(){
         console.log(this.name+"-"+this.age);
     }
 }
 var a = new Person('wutao');
 var b = new Son("wwwwww",22);
 a.sayHello();//wutao
 b.sayHello();//wwwwww; 通过call继承来的父类Person的方法sayHello
 b.sayFunc();//wwwwww-22

apply:

 function Person(name){
     this.name = name;
     this.sayHello = function(){
         console.log(this.name);
     }
 }

 function Son(name,age){
     Person.apply(this,[name,age]);//apply用法:类似call,将this指针指向父类构造函数,并传入一个由参数组成的数组参数,使其拥有父类的属性和方法
     this.age = age;
     this.sayFunc = function(){
         console.log(this.name+"-"+this.age);
     }
 }
 var a = new Person('wutao');
 var b = new Son("ttt",222);
 a.sayHello();//wutao
  b.sayFunc();//ttt-222

js最主要的继承方法就这2种,当然,还有几种继承方法,但是有些继承方式在创建了实例之后,修改实例方法和属性会直接修改原型的方法和属性,那这样的继承就显得意义不大了,除非是业务有类似的需求才会去用到。

有不足的地方,希望大虾大神们指出!

谈谈JavaScript的2种主要继承方式的更多相关文章

  1. 谈谈javascript中的prototype与继承

    谈谈javascript中的prototype与继承 今天想谈谈javascript中的prototype. 通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性 ...

  2. 「JavaScript」四种跨域方式详解

    超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript 的同源策略,并且了解使用跨域跨域的理由. 1. JSONP 首先要介绍的跨域方法必然是 JSON ...

  3. Javascript的一种代码结构方式——插件式

    上几周一直在做公司的webos的前端代码的重构,之中对javascript的代码进行了重构(之前的代码耦合严重.拓展.修改起来比较困难),这里总结一下当中使用的一种代码结构——插件式(听起来怎么像独孤 ...

  4. JS中5种经典继承方式

    继承 JS中继承的概念: 通过[某种方式]让一个对象可以访问到另一个对象中的属性和方法,我们把这种方式称之为继承 并不是所谓的xxx extends yyy 为什么要使用继承? 有些对象会有方法(动作 ...

  5. JavaScript的几种循环使用方式及性能解析

    循环的类型 一:for var arr = [1, 2, 3, 4, 5, 6]; for (var i = 0, len = arr.length; i < len; i++) { conso ...

  6. JavaScript中三种字符串连接方式及其性能比较

    参考地址: https://www.cnblogs.com/programs/p/5554742.html 工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题,在JS中处理这类问题一般有三种方 ...

  7. C++中的三种继承方式

    1,被忽略的细节: 1,冒号( :)表示继承关系,Parent 表示被继承的类,public 的意义是什么? class Parent { }; class Child : public Parent ...

  8. Javascript的四种继承方式

    在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...

  9. JavaScript之四种继承方式讲解

    在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...

随机推荐

  1. 餐厅到店点餐系统(APP)

    MY-HR 成员: 角色分配 学号 博客园 丘惠敏 PM项目经理 201406114203 http://www.cnblogs.com/qiuhuimin/ 郭明茵 用户 201406114204 ...

  2. C#写文本日志帮助类(支持多线程)

    代码: using System; using System.Configuration; using System.IO; using System.Threading.Tasks; namespa ...

  3. 设计模式--适配器(Adapter)模式

    今天学习另一个设计模式,适配器(Adapter)模式,这是一个共同方向,但有特殊要求,就应用到此设计模式.写到这里,想起很久以前,有写过一篇<ASP.NET的适配器设计模式(Adapter)&g ...

  4. [爬虫学习笔记]基于Bloom Filter的url去重模块UrlSeen

            Url Seen用来做url去重.对于一个大的爬虫系统,它可能已经有百亿或者千亿的url,新来一个url如何能快速的判断url是否已经出现过非常关键.因为大的爬虫系统可能一秒钟就会下载 ...

  5. 分享一下学习css,js心得

    简化代码,使页面简洁! web前端开发——将界面更好呈现给用户! 要了解在不同浏览器上的兼容情况.渲染原理和存在的bug! 网站性能优化.SEO: 代码的可维护性.性能: 网站重构的本质:建立一个前端 ...

  6. sencha动态向容器里添加控件出现重叠问题

    sencha动态向容器里添加控件出现重叠问题原因是由于动态生成控件的id有重复导致的.(js取时间到毫秒来做id,放在for里面会出现几个控件id是相同的情况.).解决掉重复id的问题就好了. 版权声 ...

  7. asp.net mvc 4 json大数据异常 提示JSON字符长度超出限制的异常

    今天客户突然过来找我说在后台添加了一篇超长的文章后,所有后台的文章都显示不出来了.后台的前端显示是用easyui的,返回的数据全是用json.根据客户的描述进行了同样的操作后,在firebug下发现a ...

  8. 使用Dhcpstarv解决DHCP服务器冲突问题

    场景: 内网环境需要开启多个DHCP服务器,分别给不同的设备进行PXE安装. 存在的问题: 多个DHCP的情况下,设备在启动时随机从一个DHCP服务器获取IP(哪个DHCP服务器先响应就从哪个获取)并 ...

  9. UVA 10090 - Marbles 拓展欧几里得

    I have some (say, n) marbles (small glass balls) and I am going to buy some boxes to store them. The ...

  10. <s:iterator>各种遍历用法

    struts2<S:iterator>遍历map小结 1.MapAction.java import java.util.ArrayList;   import java.util.Has ...