您的位置:首页 > Web前端 > JavaScript

JavaScript calss语法糖

2020-08-06 18:28 1126 查看

JavaScript calss语法糖

基础知识

  严格意义上来讲,在

Js
中是没有类这一概念的。

  我们可以运用前面章节提到的构造函数来模拟出类这一概念,并且可以通过原型对象的继承来完美的实现实例对象方法复用。

  但是这样十分的麻烦,我们需要将实例对象需要用到的公共方法来存放到构造函数的原型对象中,而使用

class
语法糖整个过程就变得非常简单。

 

声明定义

  使用

class
来定义类,类中定义的函数称为方法,不需要用关键字
function
也不需要用逗号进行分割。

 

<script>
​
"use strict";
​
class User {
​
f1() {
console.log("运行了f1...");
}
// 不需要逗号分隔
f2() {
console.log("运行了f2...");
}
​
}
​
let u1 = new User();
​
u1.f1();  // 方法调用
u1.f2();  // 方法调用
​
</script>

 

构造函数

  使用

constructor
构造函数传递参数,该函数会在
new
时自动执行。

 

<script>
​
"use strict";
​
class User {
​
constructor(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
​
show(){
console.log(`姓名:${this.name},年龄:${this.age},性别:${this.gender}`);
}
​
}
​
let u1 = new User("云崖",18,"男");
​
u1.show();  // 执行方法
​
</script>

 

  构造函数不是必须定义的,当没有定义构造函数时。

  它会自动去查找原型链,相当于如下代码所示。

constructor(...args) {
super(...args);
}

 

原理分析

  不管是使用构造函数还是

class
语法糖,其原理都是一样的。

  但是构造函数中的方法应该存放进原型对象,这一步需要我们手动去做,使用

class
语法糖的结构后则会自动将方法放入原型对象。

 

<script>
​
"use strict";
​
class U1 {
constructor(name) {
this.name = name;
}
show() {
console.log("U1 show");
}
}

console.log(typeof U1);  // function  class只是语法糖,内部还是函数。
​
</script>

 

<script>
​
"use strict";
​
class U1 {
constructor(name) {
this.name = name;
}
show() {
console.log("U1 show");
}
}
​
let u1 = new U1("class语法糖");
​
console.dir(u1);
​
// ============  两种操作一模一样 class自动将方法写入原型对象中
​
function U2(name) {
this.name = name;
}
​
U2.prototype.show = function () {
console.log("U2 show");
}
​
let u2 = new U2("构造函数");
​
console.dir(u2);
​
</script>

 

<script>

"use strict";

class Vehicle {
// 交通工具类
constructor(name) {
this.name = name;
}

whistle() {
console.log(`${this.name}在鸣笛`);  // 公用方法放父类中
}
}

class Aircraft extends Vehicle {
constructor(name) {
super(name);
}
}

class Car extends Vehicle {
constructor(name) {
super(name);
}
}

let Flyable_Mixin = {
// 飞行器的功能
fly() {
console.log(`${this.name}在飞`);
},
outer() {
console.log("其他功能...");
},
};

Object.assign(Aircraft.prototype, Flyable_Mixin); //给飞机添加上飞机Mixin的功能

let Car_Mixin = {
// 汽车的功能

reversing() {
console.log(`${this.name}正在倒车入库`);
},
outer() {
console.log("其他功能...");
},
};

Object.assign(Car.prototype, Car_Mixin); //给汽车添加汽车Mixin的功能

let c1 = new Car("法拉利");
let a1 = new Aircraft("波音747");

c1.whistle();  //  法拉利在鸣笛
c1.reversing();  // 法拉利正在倒车入库

a1.whistle();  // 波音747在鸣笛
a1.fly();  // 波音747在飞

</script>
代码示例  

原型检测

检测方法

  使用

instanceof
检测构造函数的
prototype
属性是否出现在某个实例对象的原型链上

  使用

isPrototypeOf
检测一个对象是否是另一个对象的原型链中

 

<script>

"use strict";

class User {

}

let u1 = new User();

console.log(u1 instanceof User);  // true  u1的原型链中包含User的原型对象吗?

console.log(User.prototype.isPrototypeOf(u1)); // true User的原型对象在u1的原型链中吗?

</script>

 

instanceof原理

  递归不断向上检测原型对象。

 

function checkPrototype(obj, constructor) {
if (!obj.__proto__) return false;
if (obj.__proto__ == constructor.prototype) return true;
return checkPrototype(obj.__proto__, constructor);
}

 

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: