java的继承，js是怎么实现的呢？

最新推荐文章于 2024-10-17 09:40:47 发布

人间发动机y

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量143

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_46306369/article/details/120658330

版权

闲来无事，来看一下js是怎样实现继承的

在这里插入图片描述

原型和原型链

要点：理解原型的关键：

所有的引用类型（数组、函数、对象）可以自由扩展属性（除null以外）；
所有的引用类型都有一个“proto”属性（也叫隐式原型，它是一个普通的对象）；
所有的函数都有一个“prototype”属性（也叫显式原型，他也是一个普通的对象）；
所有引用类型，它的“proto”属性指向它的构造函数的“prototype”属性；
当试图得到一个对象的属性时，如果这个对象本身不存在这个属性，那么就会去它的“proto”属性（也就是它的构造函数的“prototype”属性）中去寻找。

1.原型

//这是一个构造函数
function method(name,age){
  this.name=name;
  this.age=age;
}
//所有函数都有一个prototype属性
method.prototype={
  //要点3：所有引用类型可以自由扩展属性
  //要点1：其中 this 是执行时谁调用了这个函数
  showName:function(){
    console.log("我叫" + this.name);
  },
  showAge:function(){
    console.log("今年" + this.age);
  }
}
var data = new method("张三",18);
//当试图得到一个对象的属性时，如果这个对象本事不存在这个属性，就去它的构造方法的prototype属性中去找
data.showName();
data.showAge();

若要通过method()来创建多个对象：

function method(){
  this.name = name;
  this.age = age;
  this.showName = function(){
    console.log("我叫" + this.name);
  }
  this.showAge = function(){
    console.log("今年" + this.age);
  }
}

那么创建出来的每一个对象，都会有showName和showAge方法，这样就会占用很多资源。
而通过原型来实现的话，只需要在构造方法中给属性赋值，而把方法写在method.prototype属性（这个属性是唯一的）里面。这样每个对象都可以使用prototype属性里面的方法，并且节省了不少资源。

2.原型链

要点5：当试图得到一个对象的属性时，如果这个对象本事不存在这个属性，那么就会去它构造函数的“prototype”中去寻找，那又因为“prototype”属性是一个对象，所以它也有一个“proto”属性。

例1

function method(name,age){
  this.name = name;
  this.age = age;
}
Object.prototype.toString = function(){
  console.log("我是"+this.name+",今年"+this.age);
}
var data = new method("小明",20);
data.toString();
console.log(data.__proto__ === method.prototype);
console.log(method.prototype.__proto__ === Object.prototype);
console.log(data.toString === method.prototype.__proto__.toString);
console.log(Object.prototype.__proto__ === null);

分析：
在这里插入图片描述

首先，data的构造函数是method(),所以：

data.proto === method.prototype

又因为method.prototype是一个普通对象，它的构造方法是Objecy,所以：

method.prototype.proto === Object.prototype

通过上面代码，得知这个toString()方法是在Object.prototype中，当调用这个对象的本事并不存在的方法时，它会一层一层地往上去找，一直到null为止。

data能够获取Object.prototype的toString()正是因为存在原型链的机制。

注：

在使用原型的时候，一般推荐奖需要的扩展方法写在构造函数的prototype属性中，避免写在__proto__属性里面。

例2

function One(){}
function Two(){}
function Three(){}
Two.prototype = new One();
Three.prototype = new Two();
var three = new Three();
console.log(three);
console.log(three.__proto__ === Three.prototype); //true
console.log（three.__proto__.__proto__ === Two.prototype);  //true
console.log（three.__proto__.__proto__.__proto__ === One.prototype）; //true
console.log（three.__proto__.__proto__.__proto__.__proto__ === Object.prototype); //true