文档章节

说说js的继承实现

大头儿子程序猿
 大头儿子程序猿
发布于 2017/04/27 10:38
字数 398
阅读 4
收藏 0
1、原型链继承

<script type="text/javascript">

function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);

employee.prototype.salary=null;//父元素修改了salary原型属性
bill.salary=20000;    //由于bill继承了父元素,所以修改salary也修改了父元素的原型属性

document.write(bill.salary);//20000

</script>

 

 

特点:

  1. 非常纯粹的继承关系,实例是子类的实例,也是父类的实例
  2. 父类新增原型方法/原型属性,子类都能访问到
  3. 简单,易于实现

 

2、构造继承

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉!');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃:' + food);
};
function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

特点:

  1. 解决了1中,子类实例共享父类引用属性的问题
  2. 创建子类实例时,可以向父类传递参数
  3. 可以实现多继承(call多个父类对象)

 

3.拷贝继承

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉!');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃:' + food);
};
function Cat(name){
  var animal = new Animal();
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  Cat.prototype.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

特点:

  1. 支持多继承

缺点:

  1. 效率较低,内存占用高(因为要拷贝父类的属性)
  2. 无法获取父类不可枚举的方法(不可枚举方法,不能使用for in 访问到)

 

 

 

© 著作权归作者所有

共有 人打赏支持
大头儿子程序猿
粉丝 0
博文 20
码字总数 3454
作品 0
奉贤
程序员
私信 提问
写的一个轻量级javascript框架的设计模式

公司一直使用jQuery框架,一些小的项目还是觉得jQuery框架太过于强大了,于是自己周末有空琢磨着写个自己的框架。谈到js的设计模式,不得不说说js的类继承机制,javascript不同于PHP可以轻松...

thinkyoung
2014/12/05
0
0
JavaScript面试大全(二)

eval()是做什么的? [eval()是“魔鬼”][1] null,undefined 的区别? [来看看大神阮一峰的解释吧][2] 写一个通用的事件侦听器函数。 [JS事件监听器][3] Node.js的适用场景? [NodeJS优缺点及...

百变茄
2014/06/05
0
0
CEF JS与browser进程间的异步通信

版权声明:本文为foruok原创文章,转载请通过订阅号“程序视界”联系foruok获取授权。 https://blog.csdn.net/foruok/article/details/50780333 基于CEF开发时经常需要在JS和C++代码间通信,...

foruok
2016/03/02
0
0
JavaScript 中的继承:ES3、ES5 和 ES6

选择一种继承方式 JavaScript 是一门动态语言,动态意味着高灵活性,而这尤其可以体现在继承上面。JavaScript 中的继承有很多种实现方式,可以分成下面四类: Mixin 模式,即属性混入,从一个...

天方夜
10/30
0
0
使用Kotlin:让Android与JS交互的详解

先来说说什么是JS交互: 说的俗一点就是通过我们项目中的控件来调用HTML里的JS代码,也可以通过JS来调用项目中的代码。 Android与JS之间的桥梁就是WebView了,我们是通过WebView来实现他们的...

富江___
06/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

程序员,你焦虑吗?

前言 我很焦虑,请问程序员们,你焦虑吗? 我是一名年过35的北漂程序员,我身边的朋友大多也是程序员。我总感觉到30岁以上的程序员充满了焦虑。“华为清退35岁以上老员工”、“中兴程序员坠楼...

Ala6
24分钟前
1
0
RabbitMQ+PHP 教程一(Hello World)用yii2测试通过

介绍 RabbitMQ是一个消息代理器:它接受和转发消息。你可以把它当作一个邮局:当你把邮件放在信箱里时,你可以肯定邮差先生最终会把邮件送到你的收件人那里。在这个比喻中,RabbitMQ就是这里...

hansonwong
29分钟前
0
0
Netty原理分析往这边看!

Netty是一个高性能、异步事件驱动的NIO框架,它提供了对TCP、UDP和文件传输的支持,作为一个异步NIO框架,Netty的所有IO操作都是异步非阻塞的,通过Future-Listener机制,用户可以方便的主动...

Java干货分享
33分钟前
2
0
在Scala中构建Web API的4大框架

Scala是一种强大的语言,很快就成为许多开发人员的最爱。然而,语言只是一个起点-并非每个函数都将由语言核心覆盖。Scala还创建了一些厉害的框架。接下来看看Scala的4个强大框架以及其优点和...

数据星河
36分钟前
0
0
天猫双 11 背后:409 亿次安全保护,全链路保障每个购物场景

2135 亿元!2018 天猫双 11 再次刷新纪录。 这一数字背后,为了让用户更畅快买买买,一个简单的点击下单过程,就有百余项阿里安全技术在保驾护航:全天拦截 16 亿次恶意攻击、保护 409 亿次用...

Mr_zebra
43分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部