面向对象

更新: 7/21/2025 字数: 0 字时长: 0 分钟

面向对象不用多说，大家都是了解的，JS作为一门高级语言，自然也是具有面向对象的能力的。

在Java和Kotlin中，对象是指一个class，我们会在一个class中去创建一个对象，而在JS中，面向对象则是基于构造函数（constructor）和原型链（prototype）

//这样就是一个类的最小模板，类名为Student,Student中的变量定义在function中
var Student=function(){
	this.age=11
}

var student=new Student()

我们默认规定构造函数必须要使用大写字母开头，其特点是内部具有this关键字。

使用时，我们需要使用new关键字来创建对象的实例

var student=new Student()

console.log(student.age) //11

new的原理

在JS中，构造函数区分于不同函数的特点就是new关键字

new会先创建一个空对象，然后将其指向构造函数的prototype属性，最后再将这个空对象赋值给this关键字，最后执行构造函数内部的代码

在构造函数中，可以没有return，会自动返回创建的对象，但是如果有return，只有当return为对象时return才生效，返回值为return后面的对象

JS中this指向的是当前属性所在的环境，这其实比较好理解，但JS中的this是动态的。

举个例子

var f=function(){
	console.log(this.x)
}

这里的this是什么？

这和JS的数据结构有关。JS中原始的对象以字典结构保存，每一个属性名都对应一个属性描述对象。

对于一般的数据

var obj = { foo:  5 };

其转化为这样

{
  foo: {
    [[value]]: 5
    [[writable]]: true
    [[enumerable]]: true
    [[configurable]]: true
  }
}

但是函数却不一样了，函数的value处是函数的地址，而函数作为js的一等公民，是可以这样写的

var f=function(){
	console.log(this.x)
}

var obj={
	foo:f
}

这样感觉有什么问题吗？好像看不出来。

那这样呢？

var x=1;

var f=function(){
	console.log(this.x)
}

var obj={
	x:2,
	foo:f
}

这样的两个f中的x分别是谁？

不好区分了吧，所以这里引入了this来解决这个问题。

作为面向对象的语言，继承是必不可缺的，那么JS的继承是如何实现的呢？

在ES6的class关键字出现之前，JS的继承只有基于prototype这一种方法。

JS规定一个类存在一个prototype属性，这个属性指向灵一个类。

一个类可以获得其prototype指向的类的所有的函数和变量。

在JS中，所有的类都可以向上去寻找其prototype，如果你不指定，那么其默认prototype指向的是Object.prototype（ofValue和toString方法的由来），而Object.prototype的原型是null。