前端开发工程师-前端基础-JavaScript_JavaScript面向对象编程.docx

PAGE1

PAGE1

面向对象编程基础

1对象和属性

在JavaScript中，对象是面向对象编程的核心。对象可以被视为包含数据和行为的容器。数据在对象中以属性的形式存在，而行为则通过方法来体现。属性可以是基本类型，如字符串、数字或布尔值，也可以是复杂类型，如数组、函数或其它对象。

1.1示例：创建一个对象并定义属性

//创建一个表示人的对象

constperson={

name:张三,//字符串属性

age:25,//数字属性

isStudent:false//布尔属性

};

//访问对象的属性

console.log(person.name);//输出:张三

console.log(person.age);//输出:25

console.log(person.isStudent);//输出:false

在这个例子中，我们创建了一个person对象，它有三个属性：name、age和isStudent。我们可以通过点符号或括号符号来访问这些属性。

2方法和函数

方法是对象中的函数，它们定义了对象的行为。在JavaScript中，函数可以作为对象的属性，这意味着它们可以像任何其他属性一样被访问和调用。

2.1示例：在对象中定义方法

//创建一个表示人的对象，包含一个方法

constperson={

name:张三,

age:25,

sayHello:function(){

console.log(`你好，我是${this.name}`);

}

};

//调用对象的方法

person.sayHello();//输出:你好，我是张三

在这个例子中，person对象包含了一个sayHello方法，它使用this关键字来引用对象本身。当我们调用sayHello方法时，它会输出一个包含person对象name属性的问候语。

3构造函数和原型链

构造函数是一种特殊的函数，用于创建和初始化对象。当我们使用构造函数创建对象时，这些对象会共享一个原型对象，这个原型对象包含所有对象共有的属性和方法。原型链是JavaScript中用于查找属性和方法的机制，它会沿着对象的原型链向上查找，直到找到所需的属性或方法。

3.1示例：使用构造函数创建对象

//定义一个构造函数

functionPerson(name,age){

this.name=name;

this.age=age;

}

//在构造函数的原型上定义一个方法

Person.prototype.sayHello=function(){

console.log(`你好，我是${this.name}`);

};

//使用构造函数创建对象

constperson1=newPerson(张三,25);

constperson2=newPerson(李四,30);

//调用对象的方法

person1.sayHello();//输出:你好，我是张三

person2.sayHello();//输出:你好，我是李四

在这个例子中，我们定义了一个Person构造函数，它接受name和age参数，并将它们赋值给新创建的对象的属性。然后，我们在Person.prototype上定义了一个sayHello方法，这意味着所有通过Person构造函数创建的对象都可以访问这个方法。我们使用new关键字创建了两个Person对象，并分别调用了它们的sayHello方法。

3.2示例：原型链查找

//定义一个构造函数

functionAnimal(name){

this.name=name;

}

//在构造函数的原型上定义一个方法

Animal.prototype.speak=function(){

console.log(`${this.name}发出声音`);

};

//定义一个继承自Animal的构造函数

functionDog(name,breed){

Animal.call(this,name);

this.breed=breed;

}

//设置Dog的原型为Animal的实例

Dog.prototype=Object.create(Animal.prototype);

Dog.prototype.constructor=Dog;

//在Dog的原型上定义一个方法

Dog.prototype.bark=function(){

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

};

//使用构造函