javascript prototype的深度探索不是原型继承那么简单

下面我将为你详细讲解“Javascript Prototype的深度探索不是原型继承那么简单”的完整攻略。

一、了解prototype

在Javascript中，每个对象都有一个prototype属性，这个属性指向了它所对应的构造函数的原型对象（也称为原型），也是实现JavaScript中原型继承的关键。

示例代码：

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

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.');
}

var person1 = new Person('Tom', 18);
person1.sayHello(); // Hello, my name is Tom and I am 18 years old.

上面的代码中，Person.prototype.sayHello是对Person构造函数的原型对象添加了一个sayHello方法，person1是通过new关键字创建出来的一个新的对象，它继承了Person.prototype的属性和方法，所以它可以调用sayHello方法。

二、理解继承

在JavaScript中，我们可以通过将对象的prototype属性指向另一个对象来实现“继承”。新对象可以继承另一个对象的属性和方法，也可以新增自己的属性和方法。

示例代码：

function Animal(name) {
  this.name = name;
}

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

function Cat(name) {
  Animal.call(this, name);
  this.type = 'cat';
}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

Cat.prototype.sayType = function() {
  console.log('I am a ' + this.type);
}

var cat1 = new Cat('Tom');
cat1.sayHello(); // Hello, my name is Tom
cat1.sayType(); // I am a cat

上面的代码中，Animal是一个构造函数，它的prototype对象上有一个sayHello方法。Cat继承了Animal构造函数，它通过Object.create方法将Cat.prototype的[[Prototype]]属性指向了Animal.prototype，从而实现了对Animal构造函数的继承。同时，Cat构造函数也新增了一个sayType方法，用于输出自己的属性type。

三、了解构造函数

在JavaScript中，构造函数是一种特殊的函数，可以用于创建新对象。构造函数通过new关键字调用，并且可以在构造函数中通过this关键字为新对象添加属性和方法。

示例代码：

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

  this.sayHello = function() {
    console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.');
  }
}

var person1 = new Person('Tom', 18);
person1.sayHello(); // Hello, my name is Tom and I am 18 years old.

上面的代码中，Person是一个构造函数，它通过this关键字为新对象添加了name和age属性，以及一个sayHello方法。

四、使用constructor

在Javascript中，每个对象都有一个constructor属性，它指向创建当前对象的构造函数。我们可以通过constructor属性来判断两个对象是否由同一个构造函数创建。

示例代码：

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

var person1 = new Person('Tom', 18);
var person2 = new Person('Jerry', 20);

console.log(person1.constructor === Person); // true
console.log(person2.constructor === Person); // true
console.log(person1.constructor === person2.constructor); // true

上面的代码中，我们创建了两个对象person1和person2，它们都是由Person构造函数创建的，从而它们的constructor属性都指向了Person构造函数。

五、使用instanceof

在Javascript中，我们还可以使用instanceof操作符判断一个对象是否是由一个指定的构造函数创建的。instanceof用于检测一个对象是否是某个构造函数的实例，返回值为布尔类型。

示例代码：

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

var person1 = new Person('Tom', 18);
console.log(person1 instanceof Person); // true

上面的代码中，我们使用instanceof操作符判断person1是否是Person构造函数的实例，返回值为true。

六、深入理解原型链

在Javascript中，每个对象都有一个[[Prototype]]属性，它指向对象的原型对象。原型对象也有自己的[[Prototype]]属性，指向它的原型对象。这样依次往下，最终链的末端是一个null值。

原型链的作用是实现对构造函数对象的继承。

示例代码：

function Animal(name) {
  this.name = name;
}

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

function Cat(name) {
  Animal.call(this, name);
  this.type = 'cat';
}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
Cat.prototype.sayType = function() {
  console.log('I am a ' + this.type);
}

function Tiger(name, age) {
  Cat.call(this, name);
  this.age = age;
}

Tiger.prototype = Object.create(Cat.prototype);
Tiger.prototype.constructor = Tiger;
Tiger.prototype.sayAge = function() {
  console.log('I am ' + this.age + ' years old.');
}

var tiger1 = new Tiger('Tom', 5);
tiger1.sayHello(); // Hello, my name is Tom
tiger1.sayType(); // I am a cat
tiger1.sayAge(); // I am 5 years old.
console.log(tiger1 instanceof Tiger); // true
console.log(tiger1 instanceof Cat); // true
console.log(tiger1 instanceof Animal); // true

上面的代码中，Animal、Cat和Tiger构造函数形成了一个原型链，Animal是最顶层的构造函数，它的原型对象作为Cat构造函数的原型对象。Cat构造函数的原型对象又作为Tiger构造函数的原型对象。

因此，tiger1对象继承了Tiger、Cat和Animal三个构造函数的属性和方法。同时，我们可以使用instanceof操作符来判断它是否是这三个构造函数的实例，返回值都为true。