谈一谈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 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
jquery实现手风琴案例
May 04 jQuery
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 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函数
2006/12/06 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
详解JS构造函数中this和return
2017/09/16 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Python: 传递列表副本方式
2019/12/19 Python
Python计算IV值的示例讲解
2020/02/28 Python
python程序输出无内容的解决方式
2020/04/09 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
迅雷Cued工作心得体会
2014/01/27 职场文书
青春寄语大全
2014/04/09 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
我的长征观后感
2015/06/09 职场文书
Python 中random 库的详细使用
2021/06/03 Python