JavaScript原型,原型链。

JavaScript是一种基于原型的语言,它的每个对象都拥有一个原型对象。当试图访问一个对象的属性时,不仅仅会在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型。依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。这些属性和方法就定义在Object的构造函数上的prototype属性上,并不是再实列对象的本身。

原型

函数可以有属性,每个函数都有一个特殊的属性prototype(原型)看下面的一个列子:

javascript 复制代码
 function doSomething(){
      console.log('do something');
    }
    console.log(doSomething.prototype)

运行结果是:

可以看到这个原型对象本身也有一个constructor属性,它指向doSomething函数本身,这允许通过实例访问到其构造函数。此外,这个原型对象还继承自Object.prototype,这意味着它可以通过[[Prototype]]链访问到Object.prototype上的所有属性和方法,如hasOwnProperty, isPrototypeOf, toString等。

原型链

原型链是JavaScript中实现继承的一种机制。在JavaScript中,每个对象都有一个指向另一个对象的内部链接,这个被链接的对象称为原型(prototype),而这个链接则被称为对象的[[Prototype]]。当尝试访问一个对象的属性时,如果该对象本身不存在此属性,JavaScript引擎就会通过这个链接查找该属性,直至找到该属性或到达原型链的末端(即null)为止。这一系列通过[[Prototype]]链接起来的对象就构成了原型链。

下面的图解更利于理解

原型链的工作原理:

  1. 属性查找 :当你尝试访问一个对象的属性时,JavaScript首先会在该对象自身查找。如果找不到,它会沿着原型链向上查找,直到找到该属性或者到达原型链的顶端(null)。

  2. 构造函数与原型 :每个函数都有一个prototype属性,这个属性是一个对象,包含可以由所有实例共享的属性和方法。当你使用构造函数创建对象时,新对象的[[Prototype]]将指向构造函数的prototype属性。

  3. 继承 :子对象可以通过设置其[[Prototype]]为另一个对象来实现对父对象的继承。这样,子对象就可以访问父对象的所有属性和方法,除非这些属性和方法被子对象自己覆盖。

javascript 复制代码
function Person() {
      this.name='people';
    }
    Person.prototype.say=function(){
      console.log(this.name+'hello world');
    }
    function Man(){
      this.sex='man';
    }
    // 设置Man的原型为Person
    Man.prototype=new Person();
    // 修改Man的构造函数
    Man.prototype.constructor=Man;
    const man=new Man();
    console.log(man.name);
    console.log(man.sex);
    man.say();
    // 查看原型链
    //打印 man 对象的直接原型,即 Man.prototype(这是一个通过 Person 构造函数创建的实例)。
    console.log(man.__proto__);
    console.log(Man.prototype)
    //打印 Man.prototype 的原型,也就是 Person.prototype。
    console.log(man.__proto__.__proto__);
    console.log(Person.prototype);
    //打印 Person.prototype 的原型,也就是 Object.prototype。
    console.log(man.__proto__.__proto__.__proto__);
    console.log(Object.prototype);
    //打印 Object.prototype 的原型,为 null。
    console.log(man.__proto__.__proto__.__proto__.__proto__);

在上面的列子中Man的原型指向了Person实列,这意味着Man不仅可以访问自己的属性和方法还可以通过原型链来访问Person的的属性和方法。

相关推荐
砍光二叉树11 小时前
【设计模式】创建型-原型模式
设计模式·原型模式
RFCEO1 天前
JavaScript基础课程十四、原型与原型链(JS 核心底层)
开发语言·原型模式·prototype原型详解·javascript基础课·构造函数原型方法定义与使用·js原型链继承机制入门·t原型链顶层null原理
new code Boy2 天前
前端核心基础汇总
开发语言·javascript·原型模式
爱写bug的野原新之助2 天前
爬虫之补环境脚本:脱环境
javascript·爬虫·原型模式
承缘丶4 天前
使用http调用Kettle资源库中的ETL任务
原型模式
夕珩8 天前
单例模式、原型模式、工厂方法模式、抽象工厂模式、建造者模式、解释器模式、命令模式
单例模式·解释器模式·建造者模式·工厂方法模式·抽象工厂模式·命令模式·原型模式
TON_G-T9 天前
JavaScript 原型与原型链
开发语言·javascript·原型模式
蜜獾云9 天前
设计模式之原型模式:以自己为原型,自己实现自己的对象拷贝逻辑
java·设计模式·原型模式
geovindu10 天前
python: Prototype Pattern
python·设计模式·原型模式
Anurmy10 天前
设计模式之原型模式
设计模式·原型模式