JS中的 构造函数、实例对象、原型对象

206 阅读3分钟

一 构造函数

在JavaScript中,用new关键字来调用的函数,称为构造函数。

在JS中,构造函数是用来初始化新创建的对象的函数。构造函数的主要目的是在创建对象时初始化对象的属性。

// 定义构造函数
function Car(brand, price) {
    this.brand = brand
    this.price = price
}
// 使用构造函数,创建新的 Car对象
const myCarOne = new Car('小米', '30万')
const myCarTwo = new Car('奔驰', '50万')

console.log(myCarOne, myCarTwo)

上述例子,Car 是构造函数,用来创建新的 Car 对象

new Car('小米', '30万') 这行代码,创建了一个新的 Car 实例,并传递了参数 'brand' 'price' 给构造函数,从而初始化了对象 brand 和 price 属性

二 实例对象

在js中,实例对象是一个使用构造函数创建的对象。每个实例对象都继承自构造函数的原型对象

也叫对象实例,也可以通过类创造

如下是一个,创建实例对象的例子

// 定义一个构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}
 
// 给构造函数的原型添加方法
Person.prototype.greet = function() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
};
 
// 使用构造函数创建一个实例对象
const person1 = new Person('Alice', 30);
 
// 调用实例对象的方法
console.log(person1.greet());
// 输出: Hello, my name is Alice and I am 30 years old.

上述代码,Person 是构造函数,用来初始化一个新的实例对象。

person1 是通过构造函数创建的实例对象,它拥有 name 和 age 属性,并可以调用 greet 方法。

总结:在 JS中,“实例对象”和“对象实例”指的是通过类火构造函数创建的一个具体实例对象。-

三 原型对象

原型对象在 JavaScript中,是一个非常重要的概念,它是实现面向对象编程和继承的核心机制之一。

每个 JavaScript对象,都从原型继承属性和方法。

在JS中,可以使用两种方式访问原型对象:

(1)使用构造函数的prototype属性;(2)使用对象的__proto__属性。

构造函数的prototype属性,是一个指向原型对象的指针。这个原型对象包含构造函数所有实例共享的属性和方法。

对象的__proto__属性,是一个指向该对象的原型的指针。

代码一,使用构造函数的prototype属性

function Person() { }

Person.prototype.name = 'Tom';
Person.prototype.age = 30;
Person.prototype.sayHello = function () {
    console.log('Hello, my name is ' + this.name);
};

var person1 = new Person();
person1.sayHello(); // Hello, my name is Tom

var person2 = new Person();
person2.sayHello(); // Hello, my name is Tom

上述代码,首先创建了一个名为Person的构造函数。

随后,为Person的prototype属性添加了三个属性:name,age和一个方法sayHello。

当我们创建了新的Person实例时,这些属性和方法都将被这些实例共享。

代码二,使用__proto__属性

function Person() { }

var person = new Person();
person.name = 'Tom';
person.age = 30;
person.sayHello = function () {
    console.log('Hello, my name is ' + this.name);
};

var anotherPerson = new Person();
anotherPerson.__proto__.sayHello();  // Hello, my name is Tom

上述代码,首先创建了一个名为Person的构造函数,并创建了一个新的Person实例。

随后,直接在这个实例上添加了三个属性:name,age和一个方法sayHello。

随后,创建了另一个Person实例,并通过__proto__属性访问了第一个实例的属性和方法。

注意:__proto__属性是非标准的,尽量不要在生产环境中使用

代码三,使用Object.create()方法

var personProto = {
    name: 'John',
    age: 30,
    sayHello: function() {
        console.log('Hello, my name is ' + this.name);
    }
};
 
var person1 = Object.create(personProto);
person1.sayHello(); // Hello, my name is John
 
var person2 = Object.create(personProto);
person2.sayHello(); // Hello, my name is John

上述代码,首先创建了一个名为personProto的对象,它包含了想要共享的属性和方法。

随后,我们使用Object.create()方法基于这个对象创建了新的实例;这些实例将能访问和共享personProto对象中的属性和方法。

代码四,使用Class语法(ES6及以上版本)

class Person {
    constructor() {}
 
    sayHello() {
        console.log('Hello, my name is ' + this.name);
    }
}
 
Person.prototype.name = 'John';
Person.prototype.age = 30;
 
var person1 = new Person();
person1.sayHello(); // Hello, my name is John
 
var person2 = new Person();
person2.sayHello(); // Hello, my name is John

上述代码,使用了ES6的class关键字来定义