当前位置：首页 > news >正文

10.JavaScript 中的类和对象以及继承

news 2026/7/8 4:32:45

可枚举属性的补充

varobj={name:'why',age:18}Object.defineProperty(obj,'address',{value:'北京',})// address 是不可枚举的，但是属性在浏览器里面会展示成灰色的，这个是为了方便我们调试console.log(obj);

JavaScript 中的类和对象

functionPerson(name,age){}varp1=newPerson('why',18)

在 JavaScript 中 Person 应该称之为一个构造函数
从很多面向对象语言过来的开发者，也习惯称之为类

面向对象的特性-继承

面向对象的三大特性：封装、继承、多态

封装：将属性和方法封装到一个类中，可以称之为封装的过程
继承：子类继承父类，可以复用父类的功能，并且对父类进行扩展
多态：不同的对象在执行时表现出不同的形态

继承可以帮助我们将重复的代码和逻辑抽取到父类中，子类只需要继承父类即可，而不需要重复编写相同的代码

JavaScript 原型链

从一个对象上获取属性，如果在当前对象中没有获取到就会去它的原型上面获取

varobj={name:'张三',age:18}// [[Get]]操作// 1. 先从obj对象中查找属性// 2. 如果obj对象中没有，则从原型（__proto__）中查找console.log(obj.address);obj.__proto__={}obj.__proto__.__proto__={}obj.__proto__.__proto__.__proto__={address:'北京'}console.log(obj.address);

Object 的原型

顶层原型是什么?

varobj={name:"why"}console.log(obj.address);// 到底是找到哪一层对象之后停止继续查找了呢？console.log(obj.__proto__);// 字面量对象 obj 的原型是 [Object: null prototype] {}// [Object: null prototype] {} 就是顶层的原型console.log(obj.__proto__.__proto__);

顶层原型来自哪里?

varobj1={}// 创建一个对象varobj2=newObject()// 创建一个对象// Object.prototype // 顶层原型console.log(obj2.__proto__===Object.prototype);functionObject(){}// Object.prototype // 顶层原型 Object 的原型对象// Object.prototype.constructorconsole.log(Object.getOwnPropertyDescriptors(Object.prototype));

[Object: null prototype] {}原型有什么特殊？

该对象有原型属性，但是它的原型属性已经指向的是 null，也就是已经是顶层原型了
该对象上有很多默认的属性和方法

原型链关系的内存图

Object 是所有类的原型

原型链最顶层的原型对象就是 Object 的原型对象

functionPerson(){}console.log(Person.prototype.__proto__);console.log(Person.prototype.__proto__.__proto__);

实现继承

为什么需要有继承

代码方法重复

functionStudent(name,age){this.name=name;this.age=age;}Student.prototype.running=function(){console.log(this.name+" is running");}Student.prototype.eating=function(){console.log(this.name+" is eating");}Student.prototype.studying=function(){console.log(this.name+" is studying");}functionTeacher(name,age,title){this.name=name;this.age=age;this.title=title;}Teacher.prototype.running=function(){console.log(this.name+" is running");}Teacher.prototype.eating=function(){console.log(this.name+" is eating");}Teacher.prototype.teaching=function(){console.log(this.name+" is teaching");}

原型链的继承方案

// 父类：公共属性和方法functionPerson(){this.name='why';}Person.prototype.eating=function(){console.log(this.name+" eating");}// 子类：特有属性和方法functionStudent(){this.sno=111;}// 原型链继承varp=newPerson();Student.prototype=p;Student.prototype.studing=function(){console.log(this.name+" studying");}varstu=newStudent();console.log(stu.name);stu.eating()

原型链实现继承的弊端：

1、打印 stu 对象，继承的属性是看不到的
2、创建出来两个 stu 的对象

varstu1=newStudent();varstu2=newStudent();// 获取引用，修改引用中的值，会相互影响stu1.friends.push('kobe');console.log(stu2.friends);// 直接修改对象上的属性，是给本对象添加了一个新属性stu1.name='kobe';console.log(stu2.name);

3、在前面的实现类的过程中都没有传递参数

varstu1=newStudent('lilei',112);

借用构造函数继承

为了解决原型链继承中存在的问题，开发人员提供了一种新的技术：constructor stealing(借用构造函数、经典继承、伪造对象)

借用继承的做法非常简单，在子类型构造函数的内部调用父类型构造函数

因为函数可以在任意时刻被调用
因此通过apply()和call()方法也可以在新创建的对象上执行构造函数

// 父类：公共属性和方法functionPerson(name,age,friends){// this = stuthis.name=name;this.age=age;this.friends=friends;}Person.prototype.eating=function(){console.log(this.name+" eating");}// 子类：特有属性和方法functionStudent(name,age,friends){this.sno=111;// 借用上面Person构造函数的执行过程Person.call(this,name,age,friends)}// 原型链继承varp=newPerson();Student.prototype=p;Student.prototype.studing=function(){console.log(this.name+" studying");}varstu1=newStudent('why',18,['lilei']);varstu2=newStudent('kobe',30,['james']);console.log(stu1);console.log(stu2);