做防伪查询网站,教学成果奖网站建设,怎么做服装网站,电子商务网站的建设心得1.class的基本语法
class可以理解为是一个语法糖#xff0c;将js只能通过构造函数创建实例的方法进行了补充
构造函数#xff1a;
function Person ({ name, age18 }) {this.name namethis.age age
}
new Person({name: 张三})
Class类#xff1a;
class Person {con…1.class的基本语法
class可以理解为是一个语法糖将js只能通过构造函数创建实例的方法进行了补充
构造函数
function Person ({ name, age18 }) {this.name namethis.age age
}
new Person({name: 张三})
Class类
class Person {constructor ({ name, age18 }) {this.name namethis.age age}
}
new Person({name: 张三})
2.深入了解class的特性
class的数据类型是一个函数class的原型的constructor指向class通过new关键字创建出来的实例的constructor指向classclass内部的方法是定义在实例的原型上class内部的属性和constructor里面的方法和属性定义在实例上构造函数方法定义在实例的原型上属性定义在实例上 通过类创建对象的本质是调用类的constructor如果类未定义constructor则会在使用时默认添加。class不能直接调用需要通过new关键字构造函数可以直接调用也可以new 创建实例class内部方法this指向的是实例class内部是严格模式(严格模式下不存在变量提升)class中箭头函数的this和普通函数的指向不同class上面定义的普通函数是在实例的原型上箭头函数this指向定义位置所在的作用域即实例本身通过解构出来的方法直接调用普通函数的this是undefined箭头函数是当前实例class可以有取值函数getter和存值函数setter 类的属性名可以动态设置 静态方法/属性通过在属性和方法前添加static关键字静态方法和属性不会被实例继承 静态方法里面的this指向的是类而不是实例所以静态方法里面this A class定义实例的属性 直接 属性名属性值
1. class的数据类型是一个函数 console.log(typeof class A {})
2. class的原型的constructor指向class类比构造函数的原型的constructor指向构造函数 class A {}console.log(A.prototype.constructor A)
3. 通过 new 关键字创建出的实例的constructor指向该class类比new构造函数创建的实例的constructor指向构造函数本身 class A {}var a new A()console.log(a.constructor A)
4. class内部的方法实际上都是定义在类实例的prototype上属性定义在实例上constructor中的方法和实例都定义在原型上 class A {fn () {}toString() {}}var a new A()console.log(a); 5. 通过类创建对象的本质是调用类的constructor如果类未定义constructor则会在使用时默认添加。 class A {constructor () {this.name a;this.fn function() {};}fn1() {}}console.log(new A()) 6. class不能直接调用需要通过new关键字构造函数可以直接调用也可以new 创建实例
7. class内部方法this指向的是实例,class内部是严格模式(严格模式下不存在变量提升)
注意方法如果单独使用会报错class内部是严格模式所以 this 实际指向的是undefined
普通函数通过实例调用可调用但是直接结构后调用普通函数没有找到是谁调用就会报错 。将普通函数改为箭头函数后箭头函数定义位置在class中所以this表示当前类的实例的原型 class Logger {printName(name world) {console.log(this, this)this.print(Hello ${name})}print(text) {console.log(text)}}// let logger new Logger();// // 通过实例调用可以调用// logger.printName()let {printName} new Logger();printName(); //没有找到谁调用会报错 class Logger {printName (name world) {// 类中方法的this指向当前class的实例console.log(this, this)this.print(Hello ${name})}print (text) {console.log(text)}}let { printName } new Logger();printName(); //没有找到谁调用会报错
分析
1.this 实际指向的是undefined如果想要可以正常调用可以使用箭头函数箭头函数的this是由定义位置决定所以就能获取到this为当前实例
注意本身class上面定义的普通函数是在实例的原型上但是如果使用的是箭头函数则当前属性和函数就在类的实例上面了
为什么还能箭头函数中printName还能打印出this因为箭头函数定义本身没有this所以它的this的位置指向的是当前实例
2.this 实际指向的是undefined在constructor中对printName进行bind改写this
8.class中箭头函数的this和普通函数的指向不同class上面定义的普通函数是在实例的原型上箭头函数this指向定义位置所在的作用域即实例本身通过解构出来的方法直接调用普通函数的this是undefined箭头函数是当前实例 class Logger {printName(name world) {console.log(this, this)this.print(Hello ${name})}print(text) {console.log(text)}}console.log(new Logger()); class Logger {printName (name world) {// 类中方法的this指向当前class的实例console.log(this, this)this.print(Hello ${name})}print (text) {console.log(text)}}console.log(new Logger()); 3.构造函数与class的区别结合上面的几个特性回答
class只能通过new关键字调用class内部是严格模式直接解构出方法执行this会返回undefinedclass里面定义的方法和属性都在实例的原型上constructor里面定义的属性和方法才在实例上构造函数方法定义在实例的原型上属性定义在实例上class可以通过static关键字来定义静态方法
4.class的取值函数getter和存值函数setter
设置后就可以通过实例设置和获取值时触发这两个方法 class A {get name() {return 1}set name(value) {console.log(setter: value)}}var a new A()console.log(a.name);a.name lmf
5.类的属性名可以动态设置 let methodName testclass A {[methodName] () {console.log(test-----);}}var a new A()a.test()
6.静态方法/属性
通过在属性和方法前添加static关键字静态方法和属性不会被实例继承静态方法和普通方法可以重名 class A {static fn () {//静态方法的this指的是类所以这里this.getValue() A.getValue()this.getValue()console.log(this A);//true}static getValue () {console.log(张三)}getValue() {console.log(李四)}}var a new A()A.getValue()a.getValue()A.fn();//静态方法的this指的是类所以这里this.getValue() A.getValue()
7.静态方法里面的this指向的是类而不是实例 8.定义实例的属性
class A {a 1b SUCCESS
}
9. 类的继承
类的继承通过extends关键字子类中的constructor不写时会隐式生成一个constructor函数如果显示写了constructor则必须调用super否则就会报错。子类调用super会触发父类的constructor并将参数传递过去在super调用前子类是没有this如果使用会报错类在继承时属性会被直接添加到实例中方法则保留在类的原型上跟类本身属性和方法的位置一样类本身方法在原型上属性在实例上constructor中的方法和属性在实例上 class F {constructor (sMoney) {this.money 100 sMoney}fn () {}}
//通过extends实现继承class S extends F{
//子类中显示调用constructor时必须同时调用super()方法constructor (money) {// 在super调用前子类是没有this如果使用会报错//子类调用super(money)会触发父类的constructor并将参数传过去super(money)}}console.log(new S(10))// 类在继承时属性会被直接添加到实例中方法则保留在类的原型上console.log(S.prototype.__proto__ F.prototype); //true
