JavaScript中类的学习

一、JavaScript中的类

1.什么是类

        类描述了一种代码的组织结构形式，不同的语言中对其实现形式各有差异。JavaScript中的类Class实际是一种描述对象之间引用关系的语法糖。

        在Class语法糖出现之前，我们想重用一个功能模块，通常是用一个函数来进行封装：

//声明一个函数，用于功能的复用
function Animal(name) {this.name = name;
}
//可以在函数的原型上进行属性的添加，便于复用
Animal.prototype.walk = function () {return 5555
};
//通过new操作符创建一个新的函数
//new的过程发生了什么：
// 1.创建一个新的对象
// 2.将构造函数的作用域赋值给这个新对象，从而this指向了这个新对象
// 3.执行构造函数中的代码，为这个新对象添加属性
// 4.返回新对象
const dog = new Animal("小狗");//
//通过new创建了一个新对象
console.log(dog);//Animal { name: '小狗' }
//改对象拥有其构造函数上的属性
console.log(dog.walk());//5555
//通过原型可以查看原型上绑定的属性，当你获取一个属性而对象本身没有时，会一层层的查找原型上是否存在该属性，最后找到Object对象本身，没有则返回undefined，有则返回该属性
console.log(Animal.prototype);//Animal { walk: [Function] }
//引用对象的隐式原型指向构造函数的显示原型
console.log(dog.__proto__===Animal.prototype);//true

        为了更好的做成一个单独的模块，还有使用IIFE（立即执行函数）形式来增强模块的：

//立即执行函数
//立即执行函数模式是一种语法，可以让你的函数在定义后立即被执行
//立即执行函数的组成：定义一个函数；将整个函数包裹在一对括号中，将函数声明转换成表达式；在函数尾部加上一对括号，让函数立即被执行
//作用：页面加载完成后只执行一次的设置函数；将设置函数中的变量包裹在局部作用域中，不会泄漏成全局变量
var Animal = (function () {function Animal(name) {this.name = name;console.log(this.name);}Animal.prototype.walk = function (data) {console.log(data);};console.log(666);return Animal;
})();
Animal('我是name')
Animal.prototype.walk('执行方法')
//依次输出为 
//666
//我是name
//执行方法

        由于这是一种很常见的需求，所以ECMAScript规范中加入了Class语法，简化了之前的使用形式：

//通过class关键字声明一个Animal类
//constructor构造函数用于将new的实例对象指回构造函数本身
class Animal {constructor(name) {this.name = name;}walk() {console.log('执行了');}
}
//通过new关键字基于类生成实例对象
let dog = new Animal('小狗')
console.log(Animal);//[Function: Animal]
console.log(dog);//Animal { name: '小狗' }
dog.walk()//执行了

2.静态属性

        到目前为止，我们只讨论了类的实例成员，那些仅当类被实例化的时候才会被初始化的属性。 我们也可以创建类的静态成员，这些属性存在于类本身上面而不是类的实例上。 在这个例子里，我们使用 static定义 origin，因为它是所有网格都会用到的属性。 每个实例想要访问这个属性的时候，都要在 origin前面加上类名。 如同在实例属性上使用 this.前缀来访问属性一样，这里我们使用 Grid.来访问静态属性。

class Grid {//用于定义静态属性static origin = { x: 0, y: 0 };calculateDistanceFromOrigin(point) {let xDist = (point.x - Grid.origin.x);let yDist = (point.y - Grid.origin.y);console.log(this.scale);//声明实例对象时所传递的值return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;}constructor(scale) {this.scale = scale;}
}let grid1 = new Grid(1.0);  // 1x scale
let grid2 = new Grid(5.0);  // 5x scaleconsole.log(grid1.calculateDistanceFromOrigin({ x: 10, y: 10 }));
console.log(grid2.calculateDistanceFromOrigin({ x: 10, y: 10 }));

3.存取器

        通过getters/setters来截取对对象成员的访问。 它能帮助你有效的控制对对象成员的访问。

        下面来看如何把一个简单的类改写成使用 get和 set。 首先，我们从一个没有使用存取器的例子开始。

class Employee {fullName;
}let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {console.log(employee.fullName);
}

        我们可以随意的设置 fullName，这是非常方便的，但是这也可能会带来麻烦。

        下面这个版本里，我们先检查用户密码是否正确，然后再允许其修改员工信息。 我们把对 fullName的直接访问改成了可以检查密码的 set方法。 我们也加了一个 get方法，让上面的例子仍然可以工作。

let passcode = "secret passcode";class Employee {_fullName=5;get fullName() {return this._fullName;}set fullName(newName) {if (passcode && passcode == "secret passcode") {this._fullName = newName;}else {console.log("验证失败");}}
}let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {console.log(employee.fullName);
}

4.继承与多态

        使用extends关键字可以很方便的实现类之间的继承。

class Animal {move(distanceInMeters) {console.log(`Animal moved ${distanceInMeters}m.`);}
}class Dog extends Animal {bark() {console.log('Woof! Woof!');}
}const dog = new Dog();
dog.bark();//Woof! Woof!
dog.move(10);//Animal moved 10m.
dog.bark();//Woof! Woof!

        这个例子展示了最基本的继承：类从基类中继承了属性和方法。 这里， Dog是一个 派生类，它派生自 Animal 基类，通过 extends关键字。 派生类通常被称作 子类，基类通常被称作 超类。

        因为 Dog继承了 Animal的功能，因此我们可以创建一个 Dog的实例，它能够 bark()和 move()。

        下面我们来看个更加复杂的例子：

//新建Animal类
class Animal {//用于将实例对象的this指向构造函数本身constructor(theName) { this.name = theName; }move(distanceInMeters) {console.log(`${this.name} moved ${distanceInMeters}m.`);}
}
//新建Snake类继承于Animal类
class Snake extends Animal {//super关键字，代表父类对象，super(name)表示执行父类constructor(name) { super(name); }move(distanceInMeters = 5) {console.log("Slithering...");//触发父类方法super.move(distanceInMeters);}
}
//新建Horse类继承于Animal类
class Horse extends Animal {//super关键字，代表父类对象，super(name)表示执行父类constructor(name) { super(name); }move(distanceInMeters = 45) {console.log("Galloping...");//触发父类方法super.move(distanceInMeters);}
}
let sam = new Snake("Sammy the Python");
let tom = new Horse("Tommy the Palomino");
sam.move();
tom.move(34);
// 输出为
// Slithering...
// Sammy the Python moved 5m.   
// Galloping...
// Tommy the Palomino moved 34m.

        这个例子展示了一些上面没有提到的特性。 这一次，我们使用 extends关键字创建了 Animal的两个子类： Horse和 Snake。

        与前一个例子的不同点是，派生类包含了一个构造函数，它 必须调用 super()，它会执行基类的构造函数。 而且，可以用使用super关键字调用Animal中的方法。

        这个例子演示了如何在子类里可以重写父类的方法。 Snake类和 Horse类都创建了 move方法，它们重写了从 Animal继承来的 move方法，使得 move方法根据不同的类而具有不同的功能。 注意，即使 tom被声明为 Animal类型，但因为它的值是 Horse，调用 tom.move(34)时，它会调用 Horse里重写的方法。在继承链的不同层次中move方法被多次定义，当调用方法时会自动选择合适的定义，这就是多态的一种实现。

5.类的本质

        文章的开头说过Class只是一种描述对象之间引用关系的语法糖。现在我们就来看看语法糖背后的本质是什么。

class Animal {constructor(name) {this.name = name;}print() {console.log(this.name);}
}const animal = new Animal('dog');
animal.print(); // dog

        这里我们创建了一个Animal的实例，可以看到实例可以使用print中的方法。实现这一切的前提需要搞清楚new操作符到底做了什么，下面是一个new操作符的模拟实现：

//模拟实现new操作符
//创建一个Person函数，声明属性与方法
function Person(name) {this.name = name;
}
Person.prototype.sayName = function () {console.log(this.name);
}//创建一个createPerson函数用于模拟new Person实现逻辑
function createPerson() {// 1 创建一个新的对象var o = {};// 2 获取构造函数，以便实现作用域的绑定//arguments的作用：当在js中调用一个函数的时候，我们经常会给这个函数传递一些参数，js把传入到这个函数的全部参数存储在arguments中。// Arguments是一个类数组对象，对象中的每一项分别对应传入的参数console.log(arguments);//[Arguments] { '0': [Function: Person], '1': 'ydb' }//因为arguments不是数组对象,是一个类数组对象，所以不能调用数组的方法，比如prototype属性不能使用console.log(arguments.prototype);//undefined//所以为了实现后续new实现对象之前的相关绑定需要使用prototype进行绑定，所以需要将arguments转换成数组对象// console.log([].shift.call(arguments));//[Function: Person]//通过[].shift.call(arguments)将arguments从类数组对象，转成数组对象//原理: //[].slice.call( arguments )相当于Array.prototype.slice.call( arguments )//在这里，slice()是数组上的一个方法，它不改变原数组，而是从原数组中返回指定的元素，也就是一个新的数组，当没有传入任何参数的时候也就是会返回整个数组（复制原数组，不改变原数组）；然后是 call 函数，它和 apply 函数一样，他们两个都是改变函数的 this 指向，区别就是参数不一样，他们的第一个参数都是一个对象或者是 “this”，而 apply 的第二个参数是一个数组，call 后面可以继续跟多个参数，也就是 apply ( this，[ ] )；call ( this , n1，n2，n3....)// 所以重点就是：// 因为slice内部实现是使用的this为代表调用对象，那么当[ ].slice.call() 传入 arguments 对象的时候，通过 call 函数改变原来 slice 方法的 this 指向, 使其指向 arguments，并对 arguments 进行复制操作，然后返回一个新数组。所以就达到了把 arguments 类数组转为数组的目的！// 当然，[ ].shift.call( arguments ) 也是如此，shift () 方法为删除数组的第一项，并返回删除项，所以这句我们可以理解为 “ 删除arguments的第一项并返回，也就是拿到 arguments 的第一项 ”。var _constructor = [].shift.call(arguments);//获取到传入的Person函数console.log(_constructor);//[Function: Person]// 3 由于通过new操作创建的对象实例内部的不可访问的属性[[Prototype]](有些浏览器里面为__proto__)//指向的是构造函数的原型对象的，所以这里实现手动绑定。// 实例对象的隐式原型指向构造函数的现实原型o.__proto__ = _constructor.prototype;// 4.作用域的绑定使用apply改变this的指向//作为参数传递console.log(arguments,'arguments');//[Arguments] { '0': 'ydb' } argumentsconsole.log(o,'o')_constructor.apply(o, arguments);console.log(o,'o');//Person { name: 'ydb' } oreturn o;
}
var person1 = createPerson(Person, 'ydb');
person1.sayName();
console.log(person1);//Person { name: 'ydb' }

        注意这里说的构造函数并不是指的是"constructor"，而是指的是Person函数，因为每一个函数的原型对象上有一个constructor属性指向函数本身：

console.log(Person.prototype.constructor === Person); // true

        到这里可以很清楚的知道之所以person1可以使用sayName方法，完全是因为这句代码：

o.__proto__ = _constructor.prototype;

        它们实现了同一个对象的引用，这个对象在这里指的是Person的原型对象，也就是Person.prototype。并不是Person把原型对象复制给了o对象上，它们之前只是一种对象引用的关系。

        再来看看继承是如何实现的：

class Animal {//将new的实例对象指向构造函数本身constructor(name) {this.name = name;}print() {console.log(this.name);}
}class Dog extends Animal {//将new的实例对象指向构造函数本身constructor(name) {super(name);}print() {console.log("dog");}walk() {console.log(`${this.name} is a dog`);}
}const dog = new Dog('二哈');
dog.print(); // dog
dog.walk(); // 二哈 is a dog

        转换一下：

var __extends = (this && this.__extends) || (function () {var extendStatics = function (d, b) {extendStatics = Object.setPrototypeOf ||({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };return extendStatics(d, b);};return function (d, b) {extendStatics(d, b);function __() { this.constructor = d; }d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());};
})();
var Animal = /** @class */ (function () {function Animal(name) {this.name = name;}Animal.prototype.print = function () {console.log(this.name);};return Animal;
}());
var Dog = /** @class */ (function (_super) {__extends(Dog, _super);function Dog(name) {return _super.call(this, name) || this;}Dog.prototype.print = function () {console.log("dog");};Dog.prototype.walk = function () {console.log(this.name + " is a dog");};return Dog;
}(Animal));
var dog = new Dog('二哈');
dog.print(); // dog
dog.walk(); // 二哈 is a dog

        可以看出通过__extends方法实现了某些对象对其他对象的引用，达到功能模块复用的目的，并没有什么魔法。

        所以到现在你应该明白了，JavaScript中其实并没有类这个概念的，只不过是语法糖隐藏了内部实现，方便开发人员的实现对对象之间引用这种功能。JavaScript中也没有所谓的“原型继承”，本质都是对象之间的引用。