js ES6 是哪個版本的Jquery js es6 class

转载

IT剑客之家 2023-12-15 19:59:32

文章标签 js ES6 是哪個版本的Jquery class 类 js 面向对象 文章分类 jQuery 前端开发

大家好，都吃晚饭了吗？我是Kaiqisan,是一个已经走出社恐的一般生徒
JS在ES6出了新的语法—类，可能是因为它之前太放荡了，导致不少问题，现在它终于有了一个面向对象的语法了。

首先是对象，这是什么就不用多解释了，事物的抽象。直接开锤语法

首先我们康康这是怎么写的

class Demo {
	
}

它没有和java一样有代表权限的前缀。直截了当

创建一个它的实例

let a = new Demo()

a使用let定义而不是Demo，因为js的若语言性，如果要追求极致的话建议学习Typescript

打印输出

js ES6 是哪個版本的Jquery js es6 class_js

产生一个空对象

那么如何要填充呢？

class aaa {
	
	constructor(name, age) {
	    this.name = name
	    this.age = age
	}
}

const a1 = new aaa("kaiqi", 15) 
console.log(a1)

输出结果

js ES6 是哪個版本的Jquery js es6 class_js_02

constructor是类中的构造器，每一个类中都有一个构造器，如果不写构造器，就默认有一个空构造器（和java的构造函数很像）
构造器的作用，当new 一个函数的时候，优先执行构造器中的代码

如果把它改成ES5的写法，是这样的

function Demo(name, age) {
    this.name = name
    this.age = age
}

let a = new Demo('kaiqi', 20)
console.log(a);

在一个对象里，肯定包含了实例属性和静态属性

它们的概念分别是什么呢？
通过new 出来的实例访问到的属性就是实例属性
还有一种属性叫做**静态属性,**就是通过构造函数直接访问到的属性

如何制造一个静态属性？

先看源码，再具体讲解

class bbb {
	constructor(name, age) {
	    this.name = name
	    this.age = age
	}
	static app = "ddd2" //制造静态属性的方法2
	static app() {		// 制造静态方法的方法1
        console.log('ok');
	}
}
bbb.doSomething = () => { console.log }
bbb.info = "ddddd" 		//制造静态属性的方法1
const a2 = new bbb("kaiqi", 18)
bbb.sub = '1111'  // 在实例化后，再插入一个属性，最后都会到对象里去（静态的属性到构造器里），而不会被抛弃。
console.log(a2.info) //这时输出undefined
console.log(a2.constructor.info) // 正常输出
console.log(bbb.info) //这时正常输出

方法1
类名.属性名
方法2
static 属性名 这个要写在类里面，java怎么来它也怎么来。

注意点：实例化之后就无法在实例化的对象里面直接找到，需要找到它的构造器
实例对象.constructor 即可

如果要做判断，可以使用 实例 instanceof 类名来判断某个实例对象的构造者是不是某个类

如何制造实例属性？

还是先看源码，再具体讲解

class aaa {
        constructor(name, age) { // 方法1
            this.name = name
            this.age = age
        }
        app = 'app' // 方法2
    }

    const a1 = new aaa('kaiqi', 15)
    a1.uid = 10001 // 方法2
    console.log(a1)

输出结果

js ES6 是哪個版本的Jquery js es6 class_js_03

方法1
直接在class中定义（详见上面的方法1）
方法2
在构造函数中定义（详见上面的方法2）
方法3
实例对象.属性名 最直接的方法（详见上面的方法3）

这还是比较好理解的

如何制造一个静态方法？

class Demo {
    static app() { // 制造静态方法的方法1
        console.log('ok');
    }
}
    
Demo.doSomething = () => { // 制造静态方法的方法2
	console.log('ok2');
}
Demo.app() // ok
let a = new Demo()
a.constructor.getSomeThing = () => { // 制造静态方法的方法3
    console.log('get it!');
}
Demo.getSomeThing() // get it

方法1
类名.方法名
方法2
static 方法 — 和上面的定义静态变量一样，直接使用static前缀修饰
方法3
实例对象.constructor.方法名 这个方法真没必要，不推荐

如何制造一个实例方法？

class Demo {
		app2() {			// 制造实例方法的方法3
		    console.log('get it');
		}
    }

	let a = new Demo()
    a.doSomething = () => {	// 制造实例方法的方法1
        console.log('ok');
	}
	Demo.prototype.app = () => {
        console.log('ok2'); // 制造实例方法的方法2
	}
	a.doSomething() // ok
	
	a.app()	// ok2
	a.app2() // ok3