【javascript】原型链

js对象

javascript中的对象包括自定义类,函数和一些原生对象。这些对象都是拥有属性和方法的数据。(大家容易忽略的是,js中Function也是一个对象)参考学习链接

js对象

原型链

通过构造函数创建一个实例探寻原型链、原型本质和继承本质。

  1. 首先创建构造函数的同时,会在内存中分配两个空间,一个存放Person类的数据,一个存放原型Person.prototype。
  • Person类里有一个属性prototype指向原型
    (判断地址是否相同用 ===)
    Person.prototype === Person.prototype//true
  • Person.prototype中也有个属性constructor指向Person类
    Person.prototype.constructor === Person//true
  1. new/实例化一个新对象,内存分配空间,对象的__proto__属性指父类的原型
    p1.__proto__ === Person.prototype//true
//创建自定义构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        console.log('my name is', this.name);
    }
}
//通过new来实例化一个Person类的对象
var p1 = new Person('tom', 18);
var p2 = new Person('jacket', 12);
p1.sayName();
p2.sayName();

原型链是基于__proto__形成的,图中用蓝色串起来的为p1对象的原型链。
原型链的最顶端为Object.prototype。因为Object.prototype.__proto__ === null//true

js中每一个对象自身都有__proto__属性,而prototype属性只有构造函数对象有,普通函数是没有的。参考学习链接
从p1,p2调用父类原型方法sayName()可以看出,产生原型对象的本质是为了封装公有属性和方法,实现所有实例共享

为了方便理解,我们把Person类比作母亲,p1比作Person的一个孩子,Person.prototype比作父亲,里面包含着p1可以继承/调用的方法。
在这里插入图片描述
继承
原型链实际就是一种继承,实例对象继承父类原型方法
以下是继承的三种方法:

1.Person.prototype=new Animal();//让Person成为Animal的孩子
2.Object.setPrototypeOf(Person.prototype,Animal.prototype)
3.Person.prototype.proto=Animal.prototype

总结,继承本质就是让子构造函数的原型指向父构造函数实例

p1 instanceof Person
p1 instanceof Animal
p1 instanceof Object
以上三种都为true,一个对象有3种状态,这也体现了多态

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript原型链是一种通过原型(prototype)来实现对象之间继承关的机制。每个JavaScript对象都有一个原型对象,用于定义该对象的属性和方法。当访问一个对象的属性或方法时,如果该对象本身没有该属性或方法,JavaScript引擎会沿着原型链向上查找,直到找到该属性或方法为止。实际上,原型链是一个链式结构,每个对象的__proto__属性指向其原型对象,形成了一个继承关系。这样,对象可以继承其原型对象的属性和方法,并且原型对象也可以有自己的原型对象,从而形成更深层次的继承关系。因此,原型链JavaScript起到了实现对象之间继承关系的重要作用。123 #### 引用[.reference_title] - *1* *3* [JavaScript原型链](https://blog.csdn.net/m0_72446057/article/details/129155515)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *2* [JavaScript原型链(重要)](https://blog.csdn.net/liyuchenii/article/details/125957625)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值