Javascript类和继承
Javascript中的‘类’
Javascript中并没有严格意义上的类。ES5中通过使用首字母大写的方法来模拟类。这个首字母大写的方法也被称为构造函数,其是一个函数。
构造函数前面用关键字new,则创建一个新的空对象,并用这个新对象调用这个函数。
function Person (name) {
this.name = name;
}
var per1 = new Person('bob');
其实方法也是对象,方法都是由Function构造函数创建的,Function由它本身创建。
三个概念
- 构造函数:也是一个函数,一般和关键字new配合使用,你单独调用也会不报错。其本身也是一个对象。
- 原型对象 : 构造函数的prototype属性指向的就是原型对象。
- 实例对象 : new 关键字新创建的对象,new关键字和构造函数一起用,新创建的对象调用构造函数,构造函数里通过this关键字引用实例对象,
通过this关键字初始化实例对象。
function OBJ(){
return {name : 1}
};
var other = new OBJ();
other.name;
// 1
//other的构造函数为Object , 如果返回的是一个别的构造函数创建的实例对象,other就是指向这个实例对象
一个例子
function Person(name){
this.name = name
}
var per = new Person("someone");
在这个例子中,Person是构造函数,是一个函数对象,是对象就会有构造函数(Object.prototype对象除外,它是唯一没有原型和构造函数的对象)
Object.prototype instanceof Object // false 结果很有趣
函数对象的构造函数都是Function , Object也是函数对象,所以 Object的构造函数也是Function.
- 对象的constructor属性指向其对应的构造函数
Person.constructor // ? Function() { [native code] }
Object.constructor // ? Function() { [native code] }
Function也是构造函数对象,所以 Function instanceof Function 为true 同时 Function instanceof Object 也为true 而Object instanceof Function也为true 结果很有趣。 - 实例对象的proto属性是浏览器实现的一个指向该对象原型对象的属性。
Function.____proto____ === Function.prototype
Function的____proto____指向创建Function的函数的prototype,Function由它自己创建。
Objecet.prototype.___proto____ === null
实现继承
- 给实例对象的原型对象即构造函数的prototype添加方法,或属性(一般不建议添加属性),所有的实例对象都会继承这些方法和属性,而且这些方法和属性在实例对象中都是可访问的。给构造函数添加方法和属性能模拟实现类方法和类字段
- 【Javascript类和继承】当通过构造函数创建对象时,对象所有的属性值将会被复制给新的对象。但由于prototype是一个引用类型的变量,存储的是对象的地址,因此prototype中的所有属性值将会被该函数创建的所有对象共享,若一个对象修改了prototype中的某个属性,那所有对象prototype属性都会发生修改。
因此,prototype属性适合存储不变的属性,如函数;构造函数的普通属性适合存储基本类型的属性;而对象无论存储在哪里效果都一样。
- 此外,将函数存储在prototype中可以达到节约内存的功效,不论创建多少对象,该原型对象的函数在内存中只有一份。
- 在实例对象中通过obj.继承来的方法/属性 = somevalue 是无法修改原型对象的方法或属性的,因为在调用对象中的属性或者方法时,首先会在当前对象中查找是否有该属性,若无则依次在该对象的原型链中找,如果到最后还找不到则返回undefined。obj.继承来的方法/属性 = somevalue 会给当前对象创建一个和继承来的属性同名的属性,并且在当前对象中调用会覆盖掉继承来的属性。
function Student(id){
this.id = id
}
根据现实逻辑,Student是Person的一类
所以Student的实例应该有Person的特征
继承是通过prototype表现的,所有类的实例对象都会继承类(构造函数)protptype的属性和方法。prototype一定是个对象
Student.prototype = inhert(Person.prototype) || new Person();
Student.prototype.constructor = Student //这一句是指定Student实例的构造函数的,如果不指定,不会默认生成,而是使用继承来的(这里就是Person)
function inherit(obj){
if(obj == null || (typeof obj !== "object" && typeof obj !== "function")){
throw TypeError();
}
if(Object.create) return Object.create(obj);
//新建一个对象,对象构造函数的prototype为obj
var f = function(){};
f.prototype = obj;
return new f();
}
关于实例对象的constructor
- ① var obj = {};
|| var obj = new Object();
obj的构造函数是Object , obj.constructor: Object
obj的constructor是继承Object.prototype的,obj.hasOwnProperty(constructor) //false
- ② function Person(){
}
var obj2 =new Person();
obj2.constructor : Person
obj的constructor是继承Person.prototype的。
Person.prototype : {constructor : Person} //解释器创建
解释器会为Person创建一个初始的prototype,这个原型对象中有个constructor属性指向构造函数,在我们给Person的prototype指定自定义的对象时,自定义的对象会有一个继承自它的原型对象的constructor属性,如果要Person的实例对象的constructor正确的指向它的构造函数,需要我们手动添加Person.prototype.constructor = Person。
例如:如果Person.prototype = {name : 'otherobj'};
var otherobj = new Person(); otherobj.constructor : Object
- ③ var obj3 = Object.create(obj2) // 创建一个对象,obj3的原型对象为obj2
obj3.constructor //Person
obj3.constructor.prototype // obj2
obj3.constructor.prototype.constructor.prototype //{constructor : Person}
obj3.constructor.prototype.constructor.prototype.constructor.prototype //Object.prototype
- ④function Student(){
}
Student.prototype = new Person();
var obj4 =new Student();
obj4.constructor //Person
Student.prototype.constructor = Studnet; //手动设置
Student.prototype = Person.prototype //Student和Person一样了
Student.prototype = Person //Person这个函数对象被当作prototype了
var otherCon = Person;
obj4 instanceof otherCon //true instanceof是检测对象的继承关系而不是构造函数
函数有个name属性,可以用来看构造函数的name
推荐阅读
- javascript|记录一次使用原生js开发的日常jq生成列表
- javascript|Vue3 + Vite2 项目实战复盘总结(干货!)
- 基于JavaScript实现网页计算器
- 【核心概念】图像分类和目标检测中的正负样本划分以及架构理解
- javascript|echarts 水球图
- bun.js|bun.js 一个新的JavaScript运行环境
- 前端JS核心操作DOM和BOM|黑马JavaScript核心操作BOM与DOM课程笔记1-DOM
- JavaScript|JavaScript Pinia代替 Vuex的可行性分析
- 理解JavaScript中的window对象
- javascript基础|javascript 数组去重常用方法汇总