js构造函数constructor和原型prototype原理与用法实例分析

那么让我来详细讲解一下“js构造函数constructor和原型prototype原理与用法实例分析”的完整攻略。

什么是构造函数constructor？

在 JavaScript 中，构造函数是一种用于创建对象并初始化其属性的特殊函数。每个对象都是由一个构造函数生成的，JavaScript 内置了很多构造函数，比如 Array、String 等。

构造函数的名称通常以大写字母开头，这是一种用于区分普通函数和构造函数的约定。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

上面的代码定义了一个 Person 构造函数，用于创建一个人的对象。这个构造函数接收两个参数，表示该人的名字和年龄。在函数内部，我们将这两个参数分别赋值给 this.name 和 this.age，从而初始化了这个对象的属性。

什么是原型prototype？

JavaScript 中的每个对象都有一个原型（prototype），它是一个引用另一个对象的指针。当我们在一个对象上调用一个属性或方法时，如果当前对象上没有该属性或方法，JavaScript 会沿着原型链向上查找，直到找到该属性或方法为止。最终，如果还没找到，JavaScript 会返回 undefined。

var obj = {};
obj.toString();

上面的代码中，obj 对象上调用了 toString 方法，在当前对象上并没有该方法，但是 JavaScript 会沿着原型链向上查找，找到了 Object.prototype 上的 toString 方法，并将其返回。

构造函数与原型的关系

每个构造函数都有一个原型对象（prototype），该原型对象包含当前构造函数的实例所共享的方法和属性。通过修改构造函数的原型对象，我们可以为这个构造函数创建的对象添加方法和属性。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

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

var person = new Person("张三", 18);
person.sayHello();

上面的代码中，我们给 Person 构造函数的原型对象添加了一个 sayHello 方法，用于打印一个问候语。然后我们创建了一个 person 对象，并调用了 sayHello 方法。由于 person 对象是通过 Person 构造函数创建的，所以它的原型指向了 Person.prototype，因此它可以直接访问原型中的方法。

实例说明一：封装一个基于原型修饰的工具类

通过封装基于原型修饰的工具类，可以方便地创建出更加灵活、独立的组件，方便项目中的复用，下面是一个篮球运动员的工具类的实现：

function BasketballPlayer(name, age, height, weight) {
  this.name = name;
  this.age = age;
  this.height = height;
  this.weight = weight;
}

BasketballPlayer.prototype.dribble = function() {
  console.log(this.name + "正在运球。");
}

BasketballPlayer.prototype.shoot = function() {
  console.log(this.name + "正在投篮。");
}

var player1 = new BasketballPlayer("张三", 20, 180, 70);
player1.dribble(); // "张三正在运球。"
player1.shoot(); // "张三正在投篮。"

上述代码中，我们封装了一个篮球运动员的工具类，并实现了 dribble 和 shoot 两个方法。由于这两个方法是通过原型定义的，因此 BasketballPlayer 构造函数中并没有定义这些方法。我们创建了一个 player1 对象，并通过调用 dribble 和 shoot 方法来验证我们的代码是否正确。从输出结果可以看出，该工具类的实现是成功的。

实例说明二：扩展现有对象的属性和方法

通过修改已有对象的原型，我们可以为该对象动态地添加属性和方法，从而实现扩展现有对象的目的。

var obj = { name: "张三" };
obj.age = 18;

Object.prototype.sayHello = function() {
  console.log("Hello, world!");
}

obj.sayHello(); // "Hello, world!"

在这个例子中，我们创建了一个 obj 对象，包含一个 name 属性和一个 age 属性。然后我们通过修改 Object.prototype 原型对象，为所有对象添加了一个 sayHello 方法，该方法用于输出一个打招呼的字符串。最后，我们调用了 obj 对象的 sayHello 方法，并成功地输出了一段打招呼的字符串。

通过上述两个实例，我们可以更好的理解 constructor 和 prototype 的原理，并在实际项目中更加灵活地使用它们。