原型链与原型的继承


一、原型链

1.1原型链初识

首先我们要了解原型链的构成,它由构造函数,实例对象,原型对象,我们这里捋一下他们之间的关系

(1) 构造函数访问原型要用__prototype

(2)构造函数到实例对象要用new关键字

(3)实例对象到原型要用__proto__

(4)如果原型对象要到构造函数要用原型它内部的constructor方法
在这里插入图片描述
这里是拿代码实现

function person(){
    // console.log('我是人');
}//人的构造函数
//下面在人的原型中定义一个吃的函数
person.prototype.chi=function(){
    console.log('我是人在原型中的吃方法');
}
//定义一个人的实例对象
let p = new person();
p.__proto__.chi();
console.log(p);//人的实例对象
console.log(p.__proto__);//人的原型对象
console.log(person.prototype);//通过构造函数访问

在这里插入图片描述

1.2原型链的最顶层

原型链一共有两层,第二层的原型对象是所有构造函数的公共原型,如果将方法定义在公共原型中,那么所有的构造函数的实例都可以调用这个方法,下面是代码是实现

function person(){
    // console.log('我是人');
}//人的构造函数
//下面在人的原型中定义一个吃的函数
person.prototype.chi=function(){
    console.log('我是人在原型中的吃方法');
}
//定义一个人的实例对象
let p = new person();
p.__proto__.chi();
console.log(p);//人的实例对象
console.log(p.__proto__);//人的原型对象
console.log(person.prototype);//通过构造函数访问

person.prototype.__proto__.gong=function(){
    console.log('我是共同的方法');
}
//狗的构造函数
function dog(){
      
}
let d = new dog();
dog.gong();

在这里插入图片描述

二、原型的继承

我们这里说一下需求,我们定义了两个构造函数,一个是人的构造函数,一个是狗的构造函数我们在人的构造函数的原型中定义了一个方法,我们想让狗也能够调用人的原型中的方法该怎么办,接下来是代码解决这个问题,一些容易出错误的点我将它写在了代码的注释里,请友友们注意查看

function person(){
    // console.log('我是人');
}//人的构造函数
//下面在人的原型中定义一个吃的函数
person.prototype.chi=function(){
    console.log('我是人在原型中的吃方法');
}
//定义一个人的实例对象
person.prototype.__proto__.gong=function(){
    console.log('我是共同的方法');
}
//狗的构造函数
function dog(){
      
}
// let d = new dog();这个不能放在前面如果放在前面 他的原型就是之前的原型
dog.prototype=new person()
dog.prototype.contructor=dog // 我们这里不写这行代码也不会对结果造成影响,这行代码的作用是在于还原原型链
/* 
我们在这里的原型已经变成人的实例了如果要在这个代码之前定义狗的实例对象或者定义狗的
原型对象中的方法最后都会消失,为什么,因为会被这行代码替换
*/
let d = new dog()
dog.prototype.tog=function(){
    console.log('我是狗的方法');
}
d.chi();
d.tog()
/* 这里我们需要注意一些细节就是实例对象.__prpto__是可以直接写成实例对象.方法的他会自动向上面的原型找这个方法
如果找不到这个方法就会报错
*/

在这里插入图片描述


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值