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 , ...
随机推荐
- JS高阶---进程与线程
[大纲] 二级大纲: 三级大纲: [主体] (1)进程process 如下所示,两者内存空间相互独立 (2)线程thread (3)图解 注意:有的程序是多进程的,有的时单进程的 (4)单线程与多线程 ...
- Flask框架整理及配置文件
阅读目录 Flask目录结构(蓝图) pro_flask包的init.py文件, 用于注册所有的蓝图 manage.py文件,作为整个项目的启动文件 views包中的blog.py,必须要通过sess ...
- 20180706模拟赛T3——神经衰弱
文件名: card 题目类型: 传统题 时间限制: 1秒 内存限制: 128MB 编译优化: 无 题目描述 天然少女小雪非常喜欢玩一个叫做神经衰弱的游戏. 游戏规则是,有若干种牌,每种牌有若干对,开始 ...
- 怎么解决禅道启动服务mysqlzt时的端口失败
打开Windows任务管理器 查看服务是否有MySQL正在运行,停止服务 启动mysqlzt服务 重新启动禅道
- 莫烦TensorFlow_07 tensorboard可视化
import tensorflow as tf import numpy as np import matplotlib.pyplot as plt def add_layer(inputs, in_ ...
- CS231n:
Bayesian Hyperparameter Optimization is a whole area of research devoted to coming up with algorithm ...
- day 22
Creativity requires the courage to let go of certainties. 创新需要勇气承担不确定性.
- oracle--oracle18C DBCA建库(一)
一,环境配置 克隆或者安装一台oracle18c 只需要安装软件即可 主机名 ip 角色 db_inique oracle18c 192.168.0.162 主 oracle oracle18c2 1 ...
- Windows10 WSL下 龙芯3A 交叉编译环境搭建
记个流水账避免事后忘记怎么搭建的 - - 环境 Key Value 系统 Windows10 WSL系统 Ubuntu 下载工具链 http://www.loongnix.org/index.php/ ...
- Visual Studio 调试系列4 单步后退来检查旧应用状态(使用使用 IntelliTrace 窗口)
系列目录 [已更新最新开发文章,点击查看详细] IntelliTrace 后退会在每个断点处及调试器步骤事件发生时自动拍摄应用程序的快照. 凭借记录的快照便可以返回到上一个断点或步骤,并查看当 ...