谈一谈javascript中继承的多种方式


Posted in Javascript onFebruary 19, 2016

JS 是没有继承的,不过可以曲线救国,利用构造函数、原型等方法实现继承的功能。

var o=new Object();

其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属性与方法。那么为什么能访问Object对象的方法,其实访问的是其原型对象的方法,所有的方法都是放在原型中而不是类中。

console.log(o.__proto__ === Object.prototype) // true 继承的本质
console.log(o.__proto__ === Object);
console.log(Object.__proto__ === Function.prototype);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Number.__proto__ === Function.prototype);

object是万物祖先,Everything is object 嘛。 

1、内置对象都继承自object

var myNumber = new Number(10); //实例化一个数字对象

字符串对象,其实是String对象的一个实例化 

var s = ‘str';

 除了可以访问自身属性方法,还能访问父类属性方法

console.log(s.toUpperCase());
console.log(s.toString());

2、自定义对象的继承

// 父类
  var Person = function(){
   this.name='AV老师';
   this.test='测试中的毕福剑';
  } 
  Person.prototype={
   say:function(){
    console.log('呀买碟');
   }
  }
  // 构造函数
  var Canglaoshi = function(name,age,cup){
   this.name=name;
   this.age=age;
   this.cup=cup;
  }
  // 继承person,则拥有person原型中的方法
  Canglaoshi.prototype=new Person();
  Canglaoshi.prototype.ppp=function(){
   console.log('啪啪啪');
  }
  // 苍老师拥有了person中的方法
  var xiaocang=new Canglaoshi('空空',18,'E');
  xiaocang.say();
  console.log(xiaocang.name);
  console.log(xiaocang.age);
  console.log(xiaocang.cup);
  console.log(xiaocang.test);

3、自定义对象继承的原型链演示

(function() {
   //父类
   function SuperParent() {
    this.name = 'mike';
   }

   //子类继承父亲 - 二次继承:
   function Parent() {
    this.age = 12;
   }
   Parent.prototype = new SuperParent(); //通过原型,形成链条

   var parent = new Parent();
   console.log("测试父亲可以访问爷爷属性:" + parent.name);
   console.log("测试父亲可以访问自己的属性:" + parent.age);

   //继续原型链继承 - 三次继承
   function Child() { //brother构造
    this.weight = 60;
   }
   Child.prototype = new Parent(); //继续原型链继承


   //原型链测试2
   //儿子集成爷爷
   var child = new Child();
   console.log("测试儿子可以访问爷爷的属性:" + child.name); //继承了Parent和Child,弹出mike
   console.log("测试儿子可以访问父亲的属性:" + child.age); //弹出12
   console.log("测试儿子可以访问自己独特的属性:" + child.weight); //弹出12

   //原型链测试
   //爷爷可以访问Object中的方法
   var test = new SuperParent();
   console.log(test.name);
   console.log(test.toString());
   //访问链: SuperParent构造对象--》SuperParent原型对象--》Object对象--》Obect原型对象(找到toString方法)--》null

   console.log(child.name);
   //原型链:首先访问Child构造函数,发现没有name属性--》寻找__proto__,判断起指针是否为空--》指向Child原型函数,寻找有没有name属性--》
   //---》没有找到,则判断其__proto__属性是否为null,如果不为null,继续搜索--》找到parent对象,检查是否有name属性,没有。。。。
  })()

4、构造函数继承

(function() {
   function People() {
    this.race = '人类';
   }
   People.prototype = {
    eat: function() {
     alert('吃吃吃');
    }
   }

   /*人妖对象*/
   function Shemale(name, skin) {
    People.apply(this, arguments); // 用call也是一样的,注意第二个参数
    this.name = name;
    this.skin = skin;
   }
   //实例化 
   var zhangsan = new Shemale('张三', '黄皮肤')
   console.log(zhangsan.name); //张三
   console.log(zhangsan.skin); //黄皮肤
   console.log(zhangsan.race); //人类
  })()

5、组合继承

(function() {
   function Person(name, age) {
    this.name = name;
    this.age = age;
   }
   Person.prototype.say = function() {}

   function Man(name, age, no) {
    /*会自动调用Person的方法,同时将name age传递过去*/
    Person.call(this, name, age);
    //自己的属性
    this.no = no;
   }
   Man.prototype = new Person();

   var man = new Man("张三", 11, "0001");
   console.log(man.name);
   console.log(man.age);
   console.log(man.no);
  })()

6、拷贝继承

<script>
  +(function() {
   var Chinese = {
    nation: '中国'
   };
   var Doctor = {
    career: '医生'
   };
   //  请问怎样才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个"中国医生"的对象?
   //  这里要注意,这两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现"继承"。
   function extend(p) {
    var c = {};
    for (var i in p) {
 
     c[i] = p[i];


    }
    c.uber = p;
    return c;
   }
   var Doctor = extend(Chinese);
   Doctor.career = '医生';
   alert(Doctor.nation); // 中国
  })()
 </script>

7、寄生组合继承

<script>
  +(function() {
   /*继承的固定函数*/
   function inheritPrototype(subType, superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
   }

   function Person(name) {
    this.name = name;
   }
   Person.prototype.say = function() {}

   function Student(name, age) {
    Person.call(this, name);
    this.age = age;
   }

   inheritPrototype(Student, Person);
   var xiaozhang = new Student('小张', 20);
   console.log(xiaozhang.name)
  })()
 </script>

8、使用第三方框架实现继承

<script src='simple.js'></script> 
 <!-- 使用的第三方框架simple.js -->
 <script>
  +(function() { < script >
    var Person = Class.extend({
     init: function(age, name) {
      this.age = age;
      this.name = name;
     },
     ppp: function() {
      alert("你懂的");
     }
    });
   var Man = Person.extend({
    init: function(age, name, height) {
     this._super(age, name);
     this.height = height;
    },
    ppp: function() {
     /*调用父类的同名方法*/
     this._super();
     /*同时又可以调用自己的方法*/
     alert("好害羞 -,- ");
    }
   });


   var xiaozhang = new Man(21, '小张', '121');
   xiaozhang.ppp();
  })()

希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
多种js图片预加载实现方式分享
Feb 19 #Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 #Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 #Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 #Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 #Javascript
Js实现简单的小球运动特效
Feb 18 #Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 #Javascript
You might like
php 常用算法和时间复杂度
2013/07/01 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
Python requests获取网页常用方法解析
2020/02/20 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
应届生求职推荐信
2013/10/28 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
家装电话营销开场白
2015/05/29 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL
httpclient调用远程接口的方法
2022/08/14 Java/Android