UI设计师-前端基础-JavaScript基础_面向对象编程基础.docxVIP

PAGE1

PAGE1

构造函数与原型链

1构造函数的概念与应用

在JavaScript中，构造函数（ConstructorFunctions）是一种命名函数，通常用于创建具有特定属性和方法的对象实例。构造函数和普通函数的主要区别在于调用方式：当我们使用new关键字调用构造函数时，会创建一个新的对象，并将构造函数的原型（prototype）属性赋给这个新对象的原型。

1.1示例代码

//定义构造函数

functionPerson(name,age){

this.name=name;

this.age=age;

}

//为Person的原型添加方法

Person.prototype.greet=function(){

console.log(`Hello,mynameis${this.name}andIam${this.age}yearsold.`);

};

//创建Person实例

varperson1=newPerson(Alice,30);

varperson2=newPerson(Bob,25);

//调用实例方法

person1.greet();//输出:Hello,mynameisAliceandIam30yearsold.

person2.greet();//输出:Hello,mynameisBobandIam25yearsold.

1.2代码解析

定义构造函数：Person函数是构造函数，用于创建Person对象的实例。构造函数通常首字母大写以区别于普通函数。

实例属性：this.name和this.age是通过构造函数创建的对象实例的属性。

原型方法：greet方法是在构造函数的原型上定义的，这样可以被所有通过Person构造函数创建的对象实例所共享，而不需要每个实例都拥有自己的greet方法副本。节省内存，提高性能。

2原型链的原理

在JavaScript中，每个函数都有一个prototype属性，这个属性是一个对象，对象的constructor属性则指向该函数。当我们创建一个对象实例时，该实例会继承其构造函数的prototype对象中的所有属性和方法。

若对象实例在访问某个属性或方法时，在自身找不到，JavaScript引擎会向上查找其原型对象（即构造函数的prototype），直至找到或到达对象原型链的顶端（即Object.prototype）为止。

2.1示例代码

//定义构造函数

functionPerson(name){

this.name=name;

}

Person.prototype.speak=function(){

console.log(`Mynameis${this.name}`);

};

//定义子类，继承自Person

functionStudent(name,grade){

Person.call(this,name);//使用call调用父类构造函数

this.grade=grade;

}

//设置继承关系

Student.prototype=Object.create(Person.prototype);

Student.prototype.constructor=Student;

//添加子类方法

Student.prototype.study=function(){

console.log(`Imastudent.Mynameis${this.name}andImingrade${this.grade}`);

};

//创建实例

varstudent1=newStudent(Charlie,9);

//调用方法

student1.speak();//输出:MynameisCharlie

student1.study();//输出:Imastudent.MynameisCharlieandImingrade9

2.2代码解析

子类构造函数：Student是Person的子类，它继承了Person的所有属性和方法。

原型继承：通过Object.create(Person.prototype)，Student.prototype直接继承了Person.prototype。这使得Student实例可以访问Person原型上的方法。

子类原型修正：将Student.prototype.constructor属性指向Stud