Javascript（五十四）class定义构造函数

普通构造函数的定义：

class定义：

所有的属性写在constructor构造器中，原型方法（省略function）直接写在构造函数体中

普通构造函数继承：

class继承：
class 子级构造函数名名 extend 父级函数名 {}
属性继承：super（父级属性1，父级属性2，…）

原型继承继承结果与普通函数Object.create()作用一样。直接将子一级的原型指向父一级的原型，值拷贝。

整体比较：

官方构造函数方法

function Person(name,sex,age){this.name=name;this.sex=sex;this.age=age;}Person.prototype.showSelf=function(){console.log(this.name,this.sex,this.age)}//继承function Worker(name,sex,age,job){//继承父级的属性  call,apply,bindPerson.call(this,name,sex,age);this.job=job}//继承父级的方法（原型对象 原型链）//方式1：// for(let key in Person.prototype){//  Worker[key]=Person[key]// }//方式2  Object.create (原型链)Worker.prototype=Object.create(Person.prototype)//方式3  // Worker.prototype=new Person()//多态Worker.prototype.showSelf=function(){console.log(this.name,this.sex,this.age,this.job)}var p1=new Person('blue','man',18,'boss');var w1=new Worker('woker1','man',30,'boss');p1.showSelf()w1.showSelf()Worker.prototype.run=function(){}console.log(p1.__proto__)console.log(w1.__proto__)console.log(p1.__proto__==w1.__proto__)console.log(Worker.prototype,Person.prototype)console.log(Worker.prototype==Person.prototype)

class构造函数方法

class Person{constructor(name,sex,age){this.name=name;this.sex=sex;this.age=age;}showSelf(){console.log(this.name,this.sex,this.age)}}class Worker extends Person{  //extends继承父级的方法constructor(name,sex,age,job){// 1.继承父一级的属性super(name,sex,age)this.job=job;}}var p1=new Person('blue','男',18);p1.showSelf()var w1=new Worker('grenn','女',20,'play')w1.showSelf()Worker.prototype.showSelf=function(){  //多态console.log(this.name,this.sex,this.age,this.job)}w1.showSelf()p1.showSelf()console.log(Worker.prototype,Person.prototype,Worker.prototype==Person.prototype)

注意：在使用构造函数时（无论是普通构造函数，还是class构造函数），如果函数内部出现了事件绑定或者定时器，那么一定要注意事件处理函数和定时器函数的this指向问题。

解决方式：

1.bind、call、apply

2.箭头函数

3.使用变量保存this

案例：拖拽

普通的拖拽

var oG=document.getElementById('green');oG.onmousedown=function(ev){var e=ev||window.event;// var left=e.clientX-oG.offsetLeft;// var top=e.clientY-oG.offsetTop;// console.log(e.offsetX,e.offsetY,left,top)var left=e.offsetXvar top=e.offsetY;document.onmousemove=function(ev){var e=ev||window.event;oG.style.left=e.clientX-left+'px';oG.style.top=e.clientY-top+'px'}}document.onmouseup=function(){document.onmousemove=''}

改造 1.不能有函数嵌套 2.可以有全局变量
官方构造函数拖拽

function Drag(id){this.oG=document.getElementById(id);this.left=0;this.top2=0;// 注意：更改this指向 否则事件处理函数的this指向的是它的主人，也就是事件绑定的对象this.oG.onmousedown = this.down.bind(this)document.onmouseup = this.up}Drag.prototype.down=function(ev){console.log(this)var e = ev || window.event;// var left=e.clientX-oG.offsetLeft;// var top=e.clientY-oG.offsetTop;// console.log(e.offsetX,e.offsetY,left,top)this.left = e.offsetX;this.top2 = e.offsetY;// 注意：更改this指向 否则事件处理函数的this指向的是它的主人，也就是事件绑定的对象document.onmousemove =this.move.bind(this)}Drag.prototype.move=function(ev){console.log(1234,this)var e = ev || window.event;this.oG.style.left = e.clientX - this.left + 'px';this.oG.style.top = e.clientY - this.top2 + 'px'}Drag.prototype.up=function(){document.onmousemove=''}window.onload=function(){new Drag('green')}

class构造函数拖拽

class Load{constructor(target){this.oG=document.getElementById(target);this.left=0;this.top2=0;// 注意：更改this指向 否则事件处理函数的this指向的是它的主人，也就是事件绑定的对象this.oG.onmousedown = this.down.bind(this)document.onmouseup = this.up}down(ev) {console.log(this)var e = ev || window.event;// var left=e.clientX-oG.offsetLeft;// var top=e.clientY-oG.offsetTop;// console.log(e.offsetX,e.offsetY,left,top)this.left = e.offsetX;this.top2 = e.offsetY;document.onmousemove =this.move.bind(this)}move(ev) {console.log(1234,this)var e = ev || window.event;this.oG.style.left = e.clientX - this.left + 'px';this.oG.style.top = e.clientY - this.top2 + 'px'}up(){document.onmousemove=''}}window.onload=function(){new Load('green')}

拖拽继承版

选项卡

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">button{background-color: aquamarine;}p{display: none;}.mian{width: 200px;height: 200px;border: 1px dashed darkolivegreen;}</style></head><body><button>HTML</button><button>CSS</button><button>javascript</button><div class="mian"><p>html:jjjjjjj</p><p>css:hghjgjhj</p><p>javascript:hjhhhhhjhjhhhhj</p</div><script type="text/javascript">// var obtn=document.getElementsByTagName('button')// var app=document.getElementsByTagName('p')// function xunhuan(){//     for(let i=0;i<obtn.length;i++){//         obtn[i].οnclick=function(){//          for(let i=0;i<obtn.length;i++){//                 app[i].style.display='none'//                obtn[i].setAttribute('style','background-color:aquamarine;')//          }//             obtn[i].style.backgroundColor='pink'//           app[i].style.display='block'//       }//     }// }function Selectcar(target1,target2){this.obtn=document.getElementsByTagName('button')this.app=document.getElementsByTagName('p')for(let i=0;i<this.obtn.length;i++){this.obtn[i].onclick=this.click.bind(this,i)}}Selectcar.prototype.click=function(i){for(let i=0;i<this.obtn.length;i++){this.app[i].style.display='none'this.obtn[i].setAttribute('style','background-color:aquamarine;')}this.obtn[i].style.backgroundColor='pink'this.app[i].style.display='block'}new Selectcar('button','p')</script></body>
</html>

Javascript（五十四）class定义构造函数相关推荐

JavaScript五十问——对比来说CSS的Grid与FlexBox（下篇）
前言在上篇--JavaScript五十问--对比来说CSS的Grid与FlexBox(上篇),我介绍了Flex的属性与使用,今天我们来总结一下Grid的具体使用方法,最后会结合Flex与Grid布局 ...
fpga驱动rgb液晶屏_正点原子开拓者FPGA开发板资料连载第五十四章基于的数字识别实验...
1)实验平台:正点原子开拓者FPGA 开发板 2)摘自<开拓者FPGA开发指南>关注官方微信号公众号,获取更多资料:正点原子 3)全套实验源码+手册+视频下载地址:http://www.o ...
Gradle 1.12用户指南翻译——第五十四章. 构建原生二进制文件
其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Github上的地址: https://g ...
【Visual C++】游戏开发五十四浅墨DirectX教程二十一视觉的诡计公告板 Billboard 技术
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 本系列文 ...
【Visual C++】游戏开发五十四浅墨DirectX教程二十一视觉的诡计:公告板(Billboard)技术...
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 作者:毛星云(浅墨) 微博:@浅墨_毛星云邮箱: happylifemxy@163.com I'm back~,这段时间大家久等了~ ...
【正点原子STM32连载】第五十四章手写识别实验摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
1)实验平台:正点原子MiniPro H750开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id=677017430560 3)全套实验源码+手册+视频 ...
Python编程基础：第五十四节排序Sort
第五十四节排序Sort 前言实践前言我们常需要对列表.元组中的元素进行排序,例如按照字母表排列学生的名称.这里就需要用到列表的sort()方法,以及sorted()函数. 实践我们先来构建一 ...
孤荷凌寒自学python第五十四天使用python来删除Firebase数据库中的文档
孤荷凌寒自学python第五十四天使用python来删除Firebase数据库中的文档 (完整学习过程屏幕记录视频地址在文末) 今天继续研究Firebase数据库,利用google免费提供的这个数据库 ...
【零基础学Java】—TCP通信（五十四）
[零基础学Java]-TCP通信(五十四) TCP通信:面向连接的通信,客户端和服务器端必须经过三次握手,建立逻辑连接,才能通信(安全). 通信的步骤: 服务器端先启动服务器端不会主动的请求客户端, ...
信息系统项目管理师核心考点（五十四）配置项分类、状态与版本
科科过为您带来软考信息系统项目管理师核心重点考点(五十四)配置项分类.状态与版本,内含思维导图+真题 [信息系统项目管理师核心考点]配置项分类.状态与版本一.典型配置项项目计划书.需求文档.设计文 ...

Javascript（五十四）class定义构造函数

Javascript（五十四）class定义构造函数相关推荐

最新文章

热门文章