ES6-面向对象
1.老版的面向对象:
function User(name,pass){
this.name=name;
this.pass=pass;
}
User.prototype.showName=function(){//用原型加方法
console.log(this.name);
}
User.prototype.showPass=function(){//用原型加方法
console.log(this.pass);
}
var ul=new User("blue","123456");
ul.showName();//blue
ul.showPass();//
老版的问题:
(1)类和构造函数是一个问题;
(2)散开了,先写了一个函数,方法是后加进去的。
2.新版的面向对象
class User{
constructor(name,pass){//作用相似于构造器
this.name=name;
this.pass=pass;
}
showName(){
console.log(this.name);
}
showPass(){
console.log(this.pass);
}
}
var ul=new User("red","7890");
ul.showName();//red
ul.showPass();//7890
(1)新增了class关键字,构造器和类分开了;
(2)class里直接加方法。
3.老版的继承
function User(name,pass){
this.name=name;
this.pass=pass;
}
User.prototype.showName=function(){//用原型加方法
console.log(this.name);
}
User.prototype.showPass=function(){//用原型加方法
console.log(this.pass);
}
//继承
function Vipuser(name,pass,level){
User.call(this,name,pass);
this.level=level;
15 }
16 Vipuser.prototype=new User();
17 Vipuser.prototype.constructor=Vipuser;
18 Vipuser.prototype.showLevel=function(){
console.log(this.level);
}
var v1=new Vipuser('blue','123456',3);
v1.showName();//blue
v1.showPass();//
v1.showLevel();//
4.新版的继承
class User{
constructor(name,pass){//作用相似于构造器
this.name=name;
this.pass=pass;
}
showName(){
console.log(this.name);
}
showPass(){
console.log(this.pass);
}
}
//继承
class Vipuser extends User{//extends关键字:继承父类
constructor(name,pass,level){
super(name,pass);//执行父类的构造函数
this.level=level;
}
showLevel(){
console.log(this.level);
}
}
var v1=new Vipuser('blue','123456',3);
v1.showName();
v1.showPass();
v1.showLevel();
5.面向对象的应用-React
React:
(1)组件化——class
(2)强依赖于jsx(也就是babel,browser.js)
class Test extends React.Component{
constructor(...args){//继承组件所有的属性
super(...args);
}
render(){
return <li>{{this.prop.str}}</li>
}
8 }
window.onLoad=function(){
let oDiv=document.getElementById('div1');
ReactDom.render(
<ul>
<Test str='asd'></Test>
<Test str='fgh'></Test>
</ul>
oDiv
);
}
ES6-面向对象的更多相关文章
- ES6面向对象 动态添加标签页
HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...
- ES6——面向对象应用
面向对象应用——React 特点: 1.组件化(模块化) --- class(一个组件就是一个class) 2.强依赖与JSX (JSX==babel==browser.js 是JS ...
- JS - ES5与ES6面向对象编程
1.面向对象 1.1 两大编程思想 1.2 面向过程编程 POP(Process-oriented programming) 1.3 面向对象编程 OOP (Object Oriented Progr ...
- ES6 面向对象笔记
JS面向对象两大编程思想 面向过程 面向对象 面向过程编程POP 面向过程就是分析出问题的需要步骤,然后用函数一步一步的实现,使用的时候一个一个调用就可以了 面向对象编程OOP ...
- ES6面向对象实现tab栏切换效果
面向对象实现tab栏切换效果
- ES6——面向对象-基础
面向对象原来写法 类和构造函数一样 属性和方法分开写的 // 老版本 function User(name, pass) { this.name = name this.pass = pass } U ...
- es6面向对象
<script> class user{ constructor(name,age){ this.name=name; this.age=age; } showName(){ alert( ...
- es6 面向对象选项卡(自动轮播功能)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 粗看ES6之面向对象写法
标签: es6 在es6以前,js没有类的概念,虽然有构造函数原型的方式用来做面向对向开发,但是对于书法并不是十分友好,而且对于继承实现也不是十分友好. es6引入class constructor ...
- ES6新增语法(四)——面向对象
ES6中json的2个变化 简写:名字和值相同时,json可以可以简写 let a=12,b=5; let json = { a, b } console.log(json) // { a:12 , ...
随机推荐
- 201871010107-公海瑜《面向对象程序设计(java)》第七周学习总结
201871010107-公海瑜<面向对象程序设计(java)>第七周学习总结 项目 内容 这个作业属于哪个课程 ...
- csp 201403-2
代码: #include<iostream> using namespace std; ];//记录的是当前窗口在哪个顺序 int n,m,x,y; struct area{ int x1 ...
- XML 配置文件,知识点
namespace 属性:配置成接口的全限定名称,将 Mapper 接口和 XML 文件关联起来: select 标签的 id 属性值,对应定义的接口方法名. insert 标签的属性 paramet ...
- day5_7.3 数据类型的各种函数操作
昨日补充: 1.在代码的编写中,总会有一些分支编写不出来,为了不影响整个系统的跑动,可以使用pass关键字进行跳过.如 count=0 while count<10: if count<5 ...
- opencv估计两图的三维坐标变换矩阵
cv::estimateAffine3D(MatFrom, MatTo, Transfrom, inlier); Transform得到的是重MatFrom到MatTo的变换矩阵.inlier给一个空 ...
- CloudCompare打开pcd文件
Ubuntu下CloudCompare稳定版本无法打开pcd点云文件,切换到edge版本即可 $ sudo snap refresh --edge cloudcompare
- MyEclipse一直building workspace
点击Project,点击Bulid Automatically去掉其前面的勾,即取消自动编译工作空间中的所有java文件. 注:不要取消!!!!取消之后如果你修改的java文件和struts.xml等 ...
- 不使用xftp上传/下载文件到linux
yum install lrzsz # 安装软件 window端上传到linux端: 1. window端先压缩需上传的文件 2. linux端运行命令rz 3. 在弹出的窗口选择压缩好的文件, ...
- [LeetCode] 152. Binary Tree Upside Down 二叉树的上下颠倒
Given a binary tree where all the right nodes are either leaf nodes with a sibling (a left node that ...
- 守护进程--Supervisor
01,介绍 02,安装部署 yum install python-setuptoolseasy_install supervisor 03,使用说明 supervisor安装成功之后,没有提供默认的配 ...