class
---------. 1 The following code defines a "class", there can be seen a constructor method, which is the constructor
class Box{
constructor(a,b){
console.log(a+b);//8
}
play(){
}
}
let b=new Box(5,3) //实例化,当实例化时执行构造函数constructor
console.log(b.constructor === Box)//true
//对象的构造函数就是当前的类名
console.log(b.constructor === Box.prototype.constructor)//true
//b是Box类的实例，它的constructor方法就是Box类原型的constructor方法
The object constructor is the current class name
Class name and constructor of the same name in other languages, because this class needs to instantiate an object that must perform the constructor, the constructor of some languages can have multiple
Native js only one constructor, and the constructor of all classes written as construstor function, the constructor is actually the current class name
== 2 ----------- js because the constructor is the class name, so we can depending on whether the object's constructor is a class name to determine whether it belongs to the class
//通过实例化创建的对象就是一个类,可以根据构造函数判断是否属于该类
var arr=new Array(1,2,3);
console.log(arr.constructor.name);//Array
//单独打印constrctor是一个函数
//构造函数有一个name属性就是这个类的类名
console.log(arr.constructor===Array);//true
var date=new Date();
console.log(date.constructor===Date);////true
var reg=/a/g;
console.log(reg.constructor===RegExp);////true
var div=document.createElement("div");
console.log(div.constructor===HTMLDivElement);//true
---------- class. 3, in addition to the function is a local variable class attributes, this is an instance of the class object
//以下代码只为解释定义一个人类的类,并且去如何使用它,中文编程万万不可以
class man{
eyes=2;
mouse=1;
ear=2;
hands=2;
foots=2;
name;//创建了一个man的类,有以上属性
constructor(_name){
this.name=_name;
}
walk(){//man的类有walk() run() eat() fire()的方法
console.log(this.name+"走")
}
run(){
console.log(this.name+"跑")
}
eat(){
console.log(this.name+"吃")
}
fire(){
console.log(this.name+"生火")
}
}
var xiaoming=new man("小明");
//创建一个xioaming的实例化对象,具备这个man的类的所有方法和属性,可以直接使用
xiaoming.eat();
xiaoming.run();
var xiaohua=new man("小花");
//创建了一个xioahua的实例化对象
xiaohua.run();
xiaohua.fire();
1. instantiated object constructor, the object is an instance of this class(Examples of such objects xiaohua above code is instantiated by the constructor of the object, it is this class)
2. Therefore, this instance of the object to have all the attributes and methods class, Such as the above code xiaohua to have all the properties and methods of this class man
3. The instance of the object can call his own methods and properties of the
4. As a default constructor to generate an instance object can not be used to return else return in the constructor, not allowed to write the constructor return
5. The method who call, the function is that this class instance object
4 ------- here for a little exercise, get used to programming-oriented thinking, here are two different random code generator 10 small squares to see what different
The first:
function randomColor(){
var col="#";
for(var i=0;i<6;i++){
col+=Math.floor(Math.random()*16).toString(16);//随机生成颜色
}
return col;
}
class Rect{//类名首字母大写,驼峰式命名
elem;
constructor(w,h,c){
this.elem=this.createRect(w,h,c);//这里的this指该类
}
createRect(w,h,c){//创建div的方法
let div=document.createElement("div");
Object.assign(div.style,{
width:w+"px",
height:h+"px",
backgroundColor:c,
float:'left'
});
return div;
}
appendTo(parent){//把创建的div添加到父元素中
parent.appendChild(this.elem);
}
play(){
console.log("aaa");
}
run(){
console.log("1");
}
}
for(var i=0;i<10;i++){
var w=Math.floor(Math.random()*50+50);
let rect=new Rect(w,w,randomColor());//实例化10个对象,随机生成宽高和颜色
rect.appendTo(document.body);//添加到body中
}
The second:
function randomColor(){
var col="#";
for(var i=0;i<6;i++){
col+=Math.floor(Math.random()*16).toString(16);//随机生成颜色
}
return col;
}
class Rect1{
elem;
w=50;
h=50;
c="red";
constructor(){
this.elem=this.createRect();
}
createRect(){
let div=document.createElement("div");
Object.assign(div.style,{
width:this.w+"px",
height:this.h+"px",
backgroundColor:this.c
});
return div;
}
appendTo(parent){
parent.appendChild(this.elem);
}
setWH(w,h){
this.elem.style.width=w+"px";
this.elem.style.height=h+"px";
}
setBg(color){
this.elem.style.backgroundColor=color;
}
}
for(var i=0;i<10;i++){
var w=Math.floor(Math.random()*50+50);
let rect=new Rect1();//实例化10个对象,随机生成宽高和颜色
rect.setWH(w,w);
rect.setBg(randomColor())
rect.appendTo(document.body);//添加到body中
}
Achieve both effects are the same, the first half is considered a way of object-oriented programming, and each variable as the second property in the class, the better reflect the object-oriented programming ideas
5 ------- ------- inheritance
Class extends keyword can be achieved by inheritance, inheritance by modifying the prototype chain than ES5, to clear and a lot easier.
For example, to inherit Rect1 class, you need onlyYou can use extends Rect1 inherited properties and methods, And after inheriting the parent class,You must use super in the constructor () calls the constructor of the superclassWhat superclass is that this is what it is performed
class Circle1 extends Rect1{
constructor(r){
// 继承父类后,必须在构造函数中调用超类的构造函数
super();//超类的构造函数,超类是什么,这个就是什么
}
}
For example, now I want to create a ten round, just add some attributes in the creation of 10 square code can be done, then do not write a new class, you can inherit its properties in the original class and then add a new property can be done
The code first method
//随机生成颜色函数
function randomColor(){
var col="#";
for(var i=0;i<6;i++){
col+=Math.floor(Math.random()*16).toString(16);//随机生成颜色
}
return col;
}
//创建父类
class Rect{
elem;
constructor(w,h,c){
this.elem=this.createRect(w,h,c);//这里的this指该类
}
createRect(w,h,c){//创建div的方法
let div=document.createElement("div");
Object.assign(div.style,{
width:w+"px",
height:h+"px",
backgroundColor:c,
float:'left'
});
return div;
}
appendTo(parent){//把创建的div添加到父元素中
parent.appendChild(this.elem);
}
play(){
console.log("aaa");
}
run(){
console.log("1");
}
}
//继承
class Circle extends Rect{
constructor(w,h,c,r){
super(w,h,c);//超类的构造函数是有参数的,因此在这里子类中必须传入这个需要参数
this.elem.style.borderRadius=r+"%";
}
setBorder(w,c){
this.elem.style.border=w+"px solid "+c;
}
// 因为子类的方法与父类的方法相同,因此会覆盖
play(){
console.log("bbb");
}
run(){
super.run();//执行超类的run方法,在继续执行下面的内容
console.log("2");
}
}
//实例化
for(var i=0;i<10;i++){
var w=Math.floor(Math.random()*50+50);
let c=new Circle(w,w,randomColor(),50);
c.setBorder(2,"red")
c.appendTo(document.body);
c.play();
c.run();
}
The second method above code
//随机生成颜色函数
function randomColor(){
var col="#";
for(var i=0;i<6;i++){
col+=Math.floor(Math.random()*16).toString(16);//随机生成颜色
}
return col;
}
//创建父类
class Rect1{
elem;
w=50;
h=50;
c="red";
constructor(){
this.elem=this.createRect();
}
createRect(){
let div=document.createElement("div");
Object.assign(div.style,{
width:this.w+"px",
height:this.h+"px",
backgroundColor:this.c
});
return div;
}
appendTo(parent){
parent.appendChild(this.elem);
}
setWH(w,h){
this.elem.style.width=w+"px";
this.elem.style.height=h+"px";
}
setBg(color){
this.elem.style.backgroundColor=color;
}
}
//继承
class Circle extends Rect1{
constructor(){
super();//使用super()调用超类的构造函数
}
borderR(r){
this.elem.style.borderRadius=r+"%";
}
setBorder(w,c){
this.elem.style.border=w+"px solid "+c;
}
// 因为子类的方法与父类的方法相同,因此会覆盖
play(){
console.log("bbb");
}
}
//实例化
for(var i=0;i<10;i++){
let cir=new Circle();//创建对象实例
cir.borderR(50);//子类中的方法设置border-radious
var w=Math.floor(Math.random()*5+1);
cir.setBorder(w,randomColor());//子类中的方法设置border
cir.setBg(randomColor());//父类中的方法随机生成颜色
cir.appendTo(document.body)//父类中的方法添加元素到页面上
}
Achieve results is as follows:
