ES6中class类特性与JavaScript的构造函数之间的区别
什么是类：
在ES6中新增加了类的概念，可以使用class关键字声明一个类，
之后以这个类来实例化对象。类抽象了对象的公共部分，它泛指
某一大类( class )对象特指某一个，通过类实例化一个具体的对象
表面看起来可以支持正式的面向对象编程,但实际上它背后使用的仍然
是原型和构造函数的概念。
同时class类是构造函数的【语法糖】
一、类定义
//1. 匿名类
let Example = class {};
//2.命名类
let Example = class Example {};
//3.类声明
class Example {}
//不可以重复声明一样的名字，如果同时声明一个的类名会报错
二、类不会被提身,他不具备变量提升
class Example {}
let wq = new Example();
//在声明一个类时，必须是先声明一个类，再去实例这个类对象
//不能是先实例这个类对象，再去声明这个类，他不具备提升作用
//跟构造函数作比较
let star = new Star();
function Star() {}
//构造函数具备变量提升，其实是function函数具备变量提升，构造函数可以先实例对象，在声明构造函数
三、创建类和添加方法
class Sxample {
constructor(uname, age) {
this.uname = uname;
this.age = age;
}
show(money) {
console.log(this.uname + money);
}
artistic(talent) {
console.log(this.uname + talent);
}
}
var example1 = new Sxample("王总", 18);
var example2 = new Sxample("王老板", 28);
console.log(example1.uname, example1.age);
console.log(example2.uname, example2.age);
example1.show("很有钱");
example2.artistic("很有钱");
/*
知识要点：
1.类constructor构造函数：
constructor()方法是类的构造函数(默认方法)，用于传递参数返回实例对象，
通过new命令生成对象实例时，自动调用该方法。如果没有显示定义,类内部会自动给拽们创建一个constructor
2.总结要点
(1) 通过class 关键字创建类,类名我们还是习惯性定义首字母大写
(2) 类里面有个constructor函数,可以接受传递过来的参数,同时返回实例对象
(3) constructor函数只要new生成实例时,就会自动调用这个函数,如果我们不写这个函数,类也会自动生成这个函数
(4) 生成实例 new 不能省略(这个new干了些啥)
1.在内存中创建了一个新对象
2.这个新对象内部的[[Prototype]]指针被赋值为构造函数的prototype属性
3.构造函数内部的this被赋值为了这个新对象(即this指向新对象)
4.执行构造函数内部的代码(给新对象添加属性)
5.如果构造函数返回非空对象,则返回该对象:否则,返回刚创建的新对象
(5) 最后注意语法规范,创建类,类名后面不要加小括号,生成实例类名后面加小括号,构造函数不需要加function
(6) 我们类里面所有的函数不需要写function
(7) 多个函数方法之间不需要添加逗号分隔
*/
四、(extends、super)类的继承
//1.extends
class Father {
constructor() {}
money() {
console.log(10000 + "元");
}
}
class Son extends Father {
/*money() {
console.log('我自己有100块钱');
}*/
money1() {
console.log(100 + "元");
}
}
var son = new Son();
son.money();
son.money1();
/*
知识要点:
// 继承中的属性或者方法查找原则:就近原则
// 1.继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
// 2.继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就进原则)
*/
//2.super调用父类的构造函数----------------------------------------------------------
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
}
class Son extends Father {
constructor(x, y) {
super(x, y);
this.x = x;
this.y = y;
}
}
var son = new Son(1, 2);
son.sum();
//3.super调用父类的普通函数----------------------------------------------------------
class Father {
constructor(uname) {
this.uname = uname;
}
say() {
return "我是爸爸";
}
}
class Son extends Father {
constructor(uname) {
super(uname);
}
say() {
console.log("我是儿子");
console.log(super.say() + "的儿子" + this.uname);
}
}
var son = new Son("张三");
son.say();
/*
知识要点:
(1).super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数
(2)使用super时要注意几个问题（*代表比较常用的注意事项）
1.super()只能在子类构造函数和静态方法内使用
2.不能单独引用super()关键字,要么用它调用构造函数,要么用它引用静态方法 *
3.调用super()会调用父类构造函数,并将返回实例赋值给this *
4.super()的行为如同调用构造函数,如果需要给父类构造函数传参,则需要手动传入
5.如果没有定义类构造函数,在实例化派生类时会调用super(),而且会传入所有传给子类的参数
6.在类构造函数中,不能调用super()之前引用this *
7.如果在子类中显示定义了构造函数,则要么必须在在其中调用super(),要么必须在其中返回一个对象
*/
五、子类继承父类方法同时扩展自己的方法
// 父类有加法方法
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y); //8
}
}
// 子类继承父类加法方法 同时 扩展减法方法
class Son extends Father {
constructor(x, y) {
// 利用 super 调用父类的构造函数
// super 必须在子类this之前调用 但也可以省略掉this的操作
super(x, y);
//this.x = x;
//this.y = y;
}
subtract() {
console.log(this.x - this.y); //2
}
}
var son = new Son(5, 3);
son.sum();
son.subtract();
六、类遵循严格模式
什么是严格模式:
JavaScript除了提供正常模式外,还提供了严格模式。ES5的严格模式是采用具有限制性
JavaScript变体的一种方式,即在严格的条件下运行的JS代码
严格模式在IE10以上版本的浏览器中才会被支持,旧版本浏览器中会被忽略
怎么开启严格模式:
【为函数开启严格模式】两种情况
一、为脚本开启严格模式
为整个脚本文件开启严格模式,需要在所有语句之前放一个特定语句 “use strict”;(或 ‘use strict’)
二、为函数开启严格模式
要给某个函数开启严格模式,需要把 “use strict”;(或 ‘use strict’;)声明放在函数体所有语句之前
//1.没有开启严格模式时，里面的this指向是window
function fn() {
console.log(this); //window
}
fn();
//2.当开启严格模式时，里面的this指向是undefined
function fn() {
"use strict";
console.log(this); //undefined
}
fn();
//3.而class类默认是在严格模式下
class Star {
show() {
function uname() {
console.log(this);//undefined
}
uname();
}
}
var star = new Star();
star.show();
七、类的静态属性
//1.构造函数里的静态成员和实例成员
function Star(uname, age) {
this.uname = uname;
this.age = age;
// this.show = function () {
// console.log("我是实例成员");
// };
}
var star = new Star("王总", 18);
console.log(star.uname);
console.log(Star.uname); //实例成员不可以通过构造函数来访问
// star.show();
Star.sex = "男";
console.log(star.sex); //静态成员不可以通过对象来访问
console.log(Star.sex);
Star.prototype.show = function () { //通过prototype来添加方法知识优化了在里面添加方法，但实际他还是要通过实例对象来访问这个函数法法
console.log("我是通过原型的方法");
};
star.show(); //通过实例来访问
star.__proto__.show = function () {
console.log("我是方法");
};
star.show(); //通过实例来访问
console.log(star);
/*
知识要点:
构造函数的静态成员和实例成员
(1)静态成员:在构造函数本上添加的成员称为静态成员,只能由构造函数本身访问
1.静态成员 在构造函数本身上添加成员
2.静态成员 只能通过构造函数来访问
(2)实例成员:在构造函数内部创建对象成员称为实例成员,只能由实例化的对象来访问
1.实例成员就是构造函数内部通过this添加的成员 uname、age、sing 就是实例成员
2.实例成员只能通过实例化的对象来访问
*/
//2.类里面的静态
class Star {
constructor(uname, age) {
this.uname = uname;
this.age = age;
}
show() {
console.log("我原型对象是" + this.uname);
}
static sing(uname) {
console.log("我原型对象是" + uname);
}
}
var star = new Star("王总", 18);
var star1 = new Star("王老板");
star.show();
Star.sing("王老板");
//3.子类的静态方法能够通过super来调用父类的静态方法
class Person {
static getName() {
return "lear";
}
}
class Student extends Person {
static getName2() {
return super.getName() + ",hi";
}
}
console.log(Student.getName2());
/*
类里面的静态属性——[static]
1.class本身的属性,即直接定义在类内部的属性(Class.propname),
不需要实例化。 ES6 中规定，Class 内部只有静态方法，没有静态属性。
2.静态方法通常用于执行不特定于实例的操作，也不要求存在类的实例于
原型成员类似，静态成员每个类上只能有一个
3.静态类成员在类定义中使用static关键字作为前缀，在静态成员中，
this引用自身。其他所有约定跟原型成员一样。
*/
八、把类当成一个特殊函数,类的是返回对象
// 1.通过typeof操作符检测类标识符,表明它是一个函数
class Person {}
console.log(Person);
console.log(typeof Person); //function
// 2.类标识有prototype属性,而这个原型也有一个constructor属性指向类自身
class Person1 {}
console.log(Person1.prototype); //{constructor: ƒ}
console.log(Person1 === Person1.prototype.constructor); //true
// 3.与普通函数一样,可以使用instanceof操作符检查构造函数原型是否存在于实例的原型链中
class Person2 {}
var p = new Person2();
console.log(p instanceof Person2); //true
/*
4.由此可知,可以使用instanceof操作符检查一个对象与构造函数,以确定这个对象是不是类
的实例。只不过此时的构造函数要使用标识符,比如前面的例子中要检查p和Person2如前所述
,类本身具有与普通构函数一样的行为，在类的上下文中.类本身在使用new调用时就会被当成
构造函数。重点在于，类中定义的 constructor 方法【不会】被当成构造函数，在对它使用
instanceof操作符时会返回false但是,如果在创建实例时直接将类构造函数当成普通构造函
数来使用,那么instanceof操作符的返回值会返回ture
*/
class Person3 {}
var p3 = new Person3();
console.log(p3.constructor === Person3); //true
console.log(p3 instanceof Person3); //true
console.log(p3 instanceof Person3.constructor); /false
var p4 = new Person3.constructor();
console.log(p4.constructor === Person3); //false
console.log(p4 instanceof Person3); //false
console.log(p4 instanceof Person3.constructor); //true
九、实例化对象共享原型对象
// 1.构造函数共享
function Person(uname, age) {
this.uname = uname;
this.age = age;
this.sing = function () {
console.log("我在里面创建");
};
}
Person.prototype.show = function () {
console.log("我是原型链");
};
var wz = new Person("王总", 18);
var zh = new Person("张总", 28);
wz.sing();
zh.sing();
wz.show();
zh.show();
console.log(wz.sing === zh.sing); //false
console.log(wz.show === zh.show); //true
console.log(star.__proto__ === star1.__proto__); //true
// 2.类的共享
class Example {
constructor(a, b) {
this.a = a;
this.b = b;
}
sum() {
return this.a + this.b;
}
}
Example.prototype.sub = function () {
console.log("我是原型对象");
};
let exam1 = new Example(2, 1);
let exam2 = new Example(3, 1);
console.log(exam1.sum === exam2.sum); //true
console.log(exam1.sub === exam2.sub); //true
// 类的所有实例共享一个原型对象。
console.log(exam1.__proto__ === exam2.__proto__); //true
十、类是一个块级作用域
{
function fn() {
console.log("我可以被外面给获取到");
}
class Star {
show() {
console.log("我不能被我们给获取到");
}
}
}
fn();
var star = new Star(); // ReferenceError: Star is not defined
star.Star();