javascript原型链图解的总结和实践

目录
  • 原型链
  • 我们可以基于原型链来实现一个简易的JQuery库
  • 总结

原型链

在ES6中引入了class关键字，但是JS依然是基于原型的，class实际上是语法糖。

举个例子，有一个people class：

class People {
  constructor(props) {
    this.name = props.name;
  }
  run() {
    console.log('run')
  }
}

通过new people 这个class 产生了许多的人，张三，李四：

let lisi = new People('李四')

但是茫茫人海中，有一类人天赋异禀，他们这类人叫做超级英雄 class Hero

class Hero extends People {
   constructor(props) {
    super(props);
    this.power = props.power
   }
   heyHa() {
       alert(this.power)
   }
}

class Hero 继承了 People，所以英雄首先是个人,具有run方法，然后Hero具备普通人不具备的超能力heyHa方法。我们可以定义有一个英雄叫做Jinx，具有cannon的超能力：

let Jinx = new Hero({ name: 'jinx', power: 'cannon!' })

尽管实例Jinx没有定义run方法，但是通过原型链可以查找到People的原型上具有这个run方法，即它的隐式原型__proto__指向构造函数的原型

当实例访问某个方法或属性时，会从自身开始，然后往原型链上回溯查找

Jinx.heyHa() // cannon!
// 当自身有该方法时
Jinx.run = () => console.log('i just fly!')
Jinx.run() // i just fly!

那么People.prototype.__proto__指向哪里呢？Object.prototype, 在控制台中输入代码可以看到：

而Object.prototype的__prototype__ 等于 null，宇宙的尽头是虚无。。

至此完整的原型链图就是这样的：

我们可以基于原型链来实现一个简易的JQuery库

class JQuery {
  constructor(selector, nodeList) {
    const res = nodeList || document.querySelectorAll(selector);
    const length = res.length;
    for (let i = 0; i < length; i++) {
      this[i] = res[i]
    }
    this.length = length;
    this.selector = selector;
  }
  eq(index) {
    return new JQuery(undefined, [this[index]]);
  }
  each(fn) {
    for(let i = 0; i < this.length; i ++) {
      const ele = this[i]
      fn(ele)
    }
    return this;
  }
  on(type, fn) {
    return this.each(ele => {
      ele.addEventListener(type, fn, false)
    })
  }
  // 扩展其他 DOM API
}
const $$ = (selector) => new JQuery(selector);
$$('body').eq(0).on('click', () => alert('click'));

在控制台中运行一下，结果如下：

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • 图解JS原型和原型链实现原理

    在我初学 JS 语言的继承机制原型和原型链的时候,我一直理解不了这种设计机制,再加上之前原有对 Java继承的理解,在学习 JS 继承机制的设计上踩了一个大坑,很多知识点前期都是死记硬背,无法真正的理解它的设计思想. JS 中的继承机制思想可以说是学习 JS 的一个核心思想,更可以说是 JS 中的一个命脉,往往这些复杂.抽象的继承关系,以及专业术语.代名词确成为了困扰初学者的绊脚石.当我真正理解它的设计思想时,其实并没有那么复杂,而且觉得非常简单. 在写这篇 JS 的原型和原型链的文章之前,我在

  • 五句话帮你轻松搞定js原型链

    五句话帮你轻松搞定js原型链

    原型链是一种机制,指的是JavaScript每个对象包括原型对象都有一个内置的[[proto]]属性指向创建它的函数对象的原型对象,即prototype属性. 作用:原型链的存在,主要是为了实现对象的继承. 一. 记住以下5句话,轻松搞定js原型链 Function 和 Object 都是构造函数 所有的构造函数都是Function new出来的(Function自己new了自己):所有的原型对象都是Object new出来的(Object new了自己的原型对象) 每一个构造函数都有一个pro

  • [js高手之路]图解javascript的原型(prototype)对象,原型链实例

    [js高手之路]图解javascript的原型(prototype)对象,原型链实例

    我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉. function CreateObj(uName) { this.userName = uName; } CreateObj.prototype.showUserName = function(){ return this.userName; } var obj1 = new CreateObj('ghostwu'); var obj2 = new CreateObj('卫庄')

  • JavaScript原型链与继承操作实例总结

    JavaScript原型链与继承操作实例总结

    本文实例讲述了JavaScript原型链与继承操作.分享给大家供大家参考,具体如下: 1. JavaScript继承 JavaScript继承可以说是发生在对象与对象之间,而原型链则是实现继承的主要方法: 1.1 原型链 利用原型让一引用类型继承另一个引用类型的属性和方法. 构造函数中有个prototype(每个函数中都有),指向他的原型对象,每个原型对象中也有一个constructor属性,指向原构造函数.通过构造函数创建的新对象中都有一个无法直接访问的[[proto]]属性,使得对象也指向构

  • [js高手之路]从原型链开始图解继承到组合继承的产生详解

    [js高手之路]从原型链开始图解继承到组合继承的产生详解

    于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 function Person(){ this.userName = 'ghostwu'; } Person.prototype.showUserName = function(){ return this.userName; } function Teacher (){} Teacher.protot

  • javascript原型链图解的总结和实践

    javascript原型链图解的总结和实践

    目录 原型链 我们可以基于原型链来实现一个简易的JQuery库 总结 原型链 在ES6中引入了class关键字,但是JS依然是基于原型的,class实际上是语法糖. 举个例子,有一个people class: class People { constructor(props) { this.name = props.name; } run() { console.log('run') } } 通过new people 这个class 产生了许多的人,张三,李四: let lisi = new P

  • 深入浅出理解javaScript原型链

    深入浅出理解javaScript原型链

    本文实例讲述了javaScript的原型链.分享给大家供大家参考.具体分析如下: 对于javascript原型链,以前都觉得是个很深的东西,一直没有理解很明白,今天看了一些介绍后,发现这张图,表示再没有什么语言能比这张图说得清楚了. 看了这张图后突然对javascript有了质的理解. javascript的原型链有显式和隐式两种: 显式原型链:即我们常见的prototype: 隐式原型链:在一般环境下无法访问,即不可见,在FireFox下可以通过__proto__方式访问:隐式原型链用于jav

  • javascript原型链继承用法实例分析

    本文实例分析了javascript原型链继承的用法.分享给大家供大家参考.具体分析如下: 复制代码 代码如下: function Shape(){   this.name = 'shape';   this.toString = function(){    return this.name;   }  }    function TwoDShape(){   this.name = '2D shape';  }  function Triangle(side,height){   this.n

  • Javascript原型链的原理详解

    Javascript原型链的原理详解

    本文实例分析了Javascript原型链的原理.分享给大家供大家参考,具体如下: 一.JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.在JavaScript中,用 __proto__ 属性来表示一个对象的原型链.当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止! 比如现在有如下的代码: 扩展Object类,添加Clone和Extend

  • javascript原型链学习记录之继承实现方式分析

    javascript原型链学习记录之继承实现方式分析

    本文实例讲述了javascript原型链学习记录之继承实现方式.分享给大家供大家参考,具体如下: 在慕课网学习继承的笔记: 继承的几种方式: ① 使用构造函数实现继承 function Parent(){ this.name = 'parent'; } function Child(){ Parent.call(this); //在子类函数体里面执行父类的构造函数 this.type = 'child';//子类自己的属性 } Parent.call(this),this即实例,使用this执行

  • JavaScript原型链详解

    JavaScript原型链详解

    目录 1.构造函数和实例 2.属性Prototype 3.属性__proto__ 4.访问原型上的方法 5.构造函数也有__proto__ 6.构造函数的原型也有__proto__ 7.Object.prototype这个原型对象很特殊 8.总结 1.构造函数和实例 假设你声明一个方法叫做Foo() ,那么我们可以通过new Foo()来声明实例. function Foo() { console.log("我是一个构造方法"); } const f1 = new Foo(); 现在你

  • JavaScript原型链中函数和对象的理解

    JavaScript原型链中函数和对象的理解

    目录 __ proto__ prototype.__ proto__ 理解 __ proto__ 最近在看高程4,原型链肯定是绕不过的,本瓜之前一直认为,只要记住这句话就可以了: 一个对象的隐式原型(__proto__)等于构造这个对象的构造函数的显式原型(prototype) 确实,所有对象都符合这句真理,在控制台打印一试便知: const str = new String("123") str.__proto__ === String.prototype // true const

  • JavaScript原型链及常见的继承方法

    JavaScript原型链及常见的继承方法

    目录 原型链 原型链的概念 原型链的问题 几种常见的继承方法 盗用构造函数 组合继承 原型式继承 寄生式继承 寄生组合式继承 原型链 原型链的概念 在JavaScript中,每一个构造函数都有一个原型,这个原型中有一个属性constructor会再次指回这个构造函数,这个构造函数所创造的实例对象,会有一个指针(也就是我们说的隐式原型__proto__或者是浏览器中显示的[[Prototype]])指向这个构造函数的原型对象.如果说该构造函数的原型对象也是由另外一个构造函数所创造的实例,那么该构造

  • 理解JavaScript原型链

    理解JavaScript原型链

    每一个JavaScript对象都和另一个对象相关联,相关联的这个对象就是我们所说的"原型".每一个对象都会从原型继承属性和方法.有一个特殊的对象没有原型,就是Object.在之后的图示中会进行说明. 举个栗子,我们首先声明一个函数Student(): function Student(name){ this.name = name; this.hello = function(){ alert(`Hello,${this.name}`); } } 这个函数包含一个属性name和一个方法

随机推荐