当前位置: 首页 > news >正文

js中继承的几种实现方式

一、继承
1、利用原型链实现继承
function SuperFn(){
	this.flag=true;
}
SuperFn.prototype.judgeFlag=function(){
	console.log("this.flag",this.flag)
}
function suberFn(name){
	this.flag=name
}
var s=new SuperFn()
suberFn.prototype=s;
优点:所有实例可以共享原型对象中的属性和方法
缺点:如果原型对象中的属性是引言类型,会导致所有实例的更改(官方:如果包含引用类型值的原型属性会被所有实例共享)(它的优点也即是他的缺点)
2、利用call方法实现继承(借用构造函数)
function superName(name){
  console.log("super")
  this.name=name	
}
function subName(age){
	console.log("suber")
	superName.call(this)
	this.age=age
}
superName.prototype.sayname=function(){
  console.log("name==",this.name)
}
subName.prototype=new superName()
subName.prototype.constructor=subName
优点:在子类构造函数中可以向超类构造函数传递参数
缺点:不能实现函数复用(超类原型对象中定义的属性和方法不能共享)
3、组合式继承(将原型链和构造函数合在一起)
function superType(name){
	console.log("super")
	this.name=name
}
function suberType(age){
	console.log("suber")
	superType.call(this,"lxx");  //第二次调用超类 superType
	this.age=age
}
superType.prototype.sayname=function(){
	console.log("name==",this.name)
}
suberType.prototype=new superType()  //第一次调用超类 superType
suberType.prototype.constructor=suberType
优点:可以共享原型对象的属性和方法,可以向超类传递参数
缺点:不管什么情况下,都会两次调用超类构造函数
4、利用Object.create实现继承
var person={
	name:'lxx',
	age:23,
	sex:1
}
var another=Object.create(person)
function animal(){
	this.say=true;
}
animal.prototype.sayname=function(){
	console.log("name==",this.say)
}
var dog=Object.create(animal.prototype) //利用Object.create(animal.prototype)来实现及继承
Object.create()方法MDN是上的标准解释是:Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。 
Tips: Object.create(null)可以创建一个没有任何原型的对象
缺点:浏览器兼容问题,IE 9+,chorome,Safari 5+,Firefox 4+;
5、利用class(es6)语法实现继承
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
	return 3
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
class colorPoint extends Point{
	constructor(x,y,color){
		super(x,y);
		this.color=color
	}
}复制代码


相关文章:

  • 存储过程和函数
  • 配置中心
  • 如何设置游戏分辨率(C++)
  • go任务调度6(etcd租约机制/自动过期)
  • 搜索引擎网址提交入口
  • UVA713 UVALive5539 POJ1504 ZOJ2001 Adding Reversed Numbers
  • centos查看启动时间
  • Etsy如何及为什么迁移到API优先的架构
  • SpringBoot中AOP的配置
  • iOS标准库中常用数据结构和算法之查找
  • CoreText实现图文混排之点击事件-b
  • 性能优化技巧 - 集群维表
  • 不同机器下,游戏编程如何保证物体移动具有相同的速度
  • 量子通信是个鸡肋,没有证券分析师说得那么好
  • 微信,QQ这类IM app怎么做——谈谈Websocket
  • 【159天】尚学堂高琪Java300集视频精华笔记(128)
  • Angularjs之国际化
  • gulp 教程
  • Java新版本的开发已正式进入轨道,版本号18.3
  • MQ框架的比较
  • OpenStack安装流程(juno版)- 添加网络服务(neutron)- controller节点
  • PaddlePaddle-GitHub的正确打开姿势
  • Redis提升并发能力 | 从0开始构建SpringCloud微服务(2)
  • 彻底搞懂浏览器Event-loop
  • 创建一个Struts2项目maven 方式
  • 创建一种深思熟虑的文化
  • 从tcpdump抓包看TCP/IP协议
  • 第十八天-企业应用架构模式-基本模式
  • 多线程事务回滚
  • 基于axios的vue插件,让http请求更简单
  • 技术:超级实用的电脑小技巧
  • 力扣(LeetCode)357
  • 一起来学SpringBoot | 第三篇:SpringBoot日志配置
  • 一些基于React、Vue、Node.js、MongoDB技术栈的实践项目
  • 用Visual Studio开发以太坊智能合约
  • 智能合约开发环境搭建及Hello World合约
  • ​configparser --- 配置文件解析器​
  • #《AI中文版》V3 第 1 章 概述
  • #include
  • #在线报价接单​再坚持一下 明天是真的周六.出现货 实单来谈
  • $forceUpdate()函数
  • (07)Hive——窗口函数详解
  • (3)选择元素——(14)接触DOM元素(Accessing DOM elements)
  • (C语言)输入自定义个数的整数,打印出最大值和最小值
  • (ZT)一个美国文科博士的YardLife
  • (差分)胡桃爱原石
  • (翻译)Quartz官方教程——第一课:Quartz入门
  • (四)库存超卖案例实战——优化redis分布式锁
  • (原)本想说脏话,奈何已放下
  • (转)h264中avc和flv数据的解析
  • (自适应手机端)响应式新闻博客知识类pbootcms网站模板 自媒体运营博客网站源码下载
  • *p++,*(p++),*++p,(*p)++区别?
  • .360、.halo勒索病毒的最新威胁:如何恢复您的数据?
  • .equal()和==的区别 怎样判断字符串为空问题: Illegal invoke-super to void nio.file.AccessDeniedException
  • .NET CLR Hosting 简介