浅谈JS的原型和原型链

1.原型prototype

javascript中所有函数都具有这个属性，所有具有prototype属性的对象都是一个函数。prototype的作用是向对象添加一个方法/属性。

function persion(){}
persion.prototype.name = "xiaoming"
console.log(persion.prototype)//{name: "xiaoming", constructor: ƒ}

2.原型指针：__proto__

如果将上面persion函数生成一个实例对象Persion1，用prototype为他添加一个属性写法如下：

function persion(){}
persion.prototype.name = "xiaoming"
let Persion1 = new persion();
console.log(Persion1) //控制台结果如下

打印实例Persion1的结果如下:

从上面打印的结果来看，Persion1.__proto__.name = persion.prototype.name,也就是实例对象的__proto__属性等于其构造函数的prototype。

理解了上面之后，原型链就很好理解了，我们可以通过Persion1.__proto__.__proto__直接查找到Object的方法。这么说可能不太直观，上代码：

function persion(){}
persion.prototype.name = "xiaoming"
let Persion1 = new persion();
console.log(Persion1.__proto__.__proto__.toString) //通过原型链查找到的Object的toString方法
console.log(Object.prototype.toString)//Object上的toString方法

控制台打印结果如下，这样就印证原型链逐级查找的特性。

总结

任何对象都可以通过原型链,也就是__proto__属性，逐级查找，最终的重点都是Object，必经之路是function。他们的关系像是用一条链子串起来一样，我们把这种关系叫做原型链。

以上就是浅谈JS的原型和原型链的详细内容，更多关于JS的原型和原型链的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 一文秒懂JavaScript构造函数、实例、原型对象以及原型链

    1概述 ES6, 全称 ECMAScript 6.0 ,2015.06 发版.在ES6之前,对象不是基于类创建的,而是用一种称为构造函数的特殊函数来定义对象和它们的特征. 2构造函数 构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用.我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面. // 利用构造函数创建对象 function Person(uname, age) { this.uname = uname; this.age

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

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

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

  • 详解JavaScript原型与原型链

    正如一些面向对象语言中所实现的那样,在JavaScript中我们有时也需要创建一个拥有公共函数与属性的类作为父类来减少代码重复.实现类型检查与实现更加清晰地代码结构.在JavaScript中,继承是通过原型链实现的.了解JavaScript的继承与原型链之前首先需要了解JavaScript中对象创建的方式. 在JavaScript中创建对象 JavaScript中对象创建的方式有两种:工厂方法(Factory Functions).构造器方法(Constructor Functions) . 工

  • 详解js中的原型，原型对象，原型链

    详解js中的原型，原型对象，原型链

    理解原型 我们创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法.看如下例子: function Person(){ } Person.prototype.name = 'ccc' Person.prototype.age = 18 Person.prototype.sayName = function (){ console.log(this.name); } var person1 = ne

  • Javascript原型链及instanceof原理详解

    instanceof:用来判断实例是否是属于某个对象,这个判断依据是什么呢? 首先,了解一下javascript中的原型继承的基础知识: javascript中的对象都有一个__proto__属性,这个是对象的隐式原型,指向该对象的父对象的原型(prototype).显式的原型对象使用prototype,但是Object.prototype.proto=null; 判断某个对象a是否属于某个类A的实例,可以通过搜索原型链. 实例对象属性查找顺序是:实例对象内部---->构造函数原型链---->

  • 一篇文章让你搞懂JavaScript 原型和原型链

    一篇文章让你搞懂JavaScript 原型和原型链

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网 与多数面向对象的开发语言有所不同,虽然JavaScript没有引入类似类的概念(ES6已经引入了class语法糖),但它仍然能够大量的使用对象,那么如何将所有对象联系起来就成了问题.于是就有了本文中我们要讲到的原型和原型链的概念. 原型和原型链作为深入学习JavaScript最重要的概念之一,如果掌握它了后,弄清楚例如:JavaScript的继承,new关键字的原来.封装及优化等概念将变得不在话下,那么下面我们开始关于原型和原型链的介绍

  • JS原型对象操作实例分析

    本文实例讲述了JS原型对象操作.分享给大家供大家参考,具体如下: 万物皆对象,函数也同样是对象,是特殊的函数对象 function fn() {} let a = new fn(); let b = new Function() console.log(typeof a); // object console.log(typeof b); // function 打开浏览器,输入fn,会发现fn有一个prototype(原型)属性,这个属性是一个指针,指向原型对象,这个对象包括了特定类型所有共享

  • JavaScript实现原型封装轮播图

    本文实例为大家分享了JavaScript实现原型封装轮播图的具体代码,供大家参考,具体内容如下 只要用dom元素调用这个方法,传一个数组进去,里面放的是图片的路径. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid

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

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

  • 浅谈JS的原型和原型链

    浅谈JS的原型和原型链

    1.原型prototype javascript中所有函数都具有这个属性,所有具有prototype属性的对象都是一个函数.prototype的作用是向对象添加一个方法/属性. function persion(){} persion.prototype.name = "xiaoming" console.log(persion.prototype)//{name: "xiaoming", constructor: ƒ} 2.原型指针:__proto__ 如果将上面

  • 浅谈js构造函数的方法与原型prototype

    把方法写在构造函数内的情况我们简称为函数内方法,把方法写在prototype属性上的情况我们简称为prototype上的方法. •函数内的方法: 使用函数内的方法我们可以访问到函数内部的私有变量,如果我们通过构造函数new出来的对象需要我们操作构造函数内部的私有变量的话, 我们这个时候就要考虑使用函数内的方法. •prototype上的方法: 当我们需要通过一个函数创建大量的对象,并且这些对象还都有许多的方法的时候;这时我们就要考虑在函数的prototype上添加这些方法. 这种情况下我们代码的

  • 浅谈js中的三种继承方式及其优缺点

    第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = 'yellow'; this.view = function(){ return this.hair + ',' + this.eye + ',' + this.skin; } } //子类 function man(){ this.feature = ['beard','strong']; } man.pr

  • 浅谈JS继承_寄生式继承 & 寄生组合式继承

    浅谈JS继承_寄生式继承 & 寄生组合式继承

    5.寄生式继承 与寄生构造函数和工厂模式类似,创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后返回对象. function createAnother(original){ var clone = Object.create(original); //通过调用函数创建一个新对象 clone.sayHi = function(){ //以某种方式来增强这个对象 alert("Hi"); }; return clone; //返回这个对象 } var person

  • 浅谈js对象的创建和对6种继承模式的理解和遐想

    JS中总共有六种继承模式,包括原型链.借用构造函数.组合继承.原型式继承寄生式继承和寄生组合式继承.为了便于理解记忆,我遐想了一个过程,对6中模式进行了简单的阐述. 很长的一个故事,姑且起个名字叫女娲造人吧. 创建对象 女娲一个一个的捏人(创建对象),这样太慢,于是设计了一种机器(函数),想造什么样的,告诉他这个人有哪些特点和功能,机器来制造.这就是工厂模式的(使用同一个接口创建对象,回产生大量重复代码,由此发明了一种函数(模具)). 但是机器造人同样也比较麻烦(挖土.和泥.捏眼睛.捏鼻子...

  • 浅谈js继承的实现及公有、私有、静态方法的书写

    今天没事的时候,研究了一下JS继承的实现,下面是html的源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS类的继承的实现</title> <script type="text/JavaScript"> //定义父类及公有.私有.静态属性及方法 function parent(){ var pname

  • 浅谈js数据类型判断与数组判断

    写在开篇: 昨天面试发现一个十分非常简单的问题竟然没有回答上来,可能也确实是因为太紧张了,感觉被自己蠢哭了.后来想想还是应该认真记录一下,这样才能印象深刻.革命尚未成功,壮实仍需努力! 1. js六大数据类型 number:数字,整数.浮点数等等, string:单引号或者双引号来说明, Boolean:返回true和false,这两个值不一定对应1和0 object:对象,可以执行new操作符后跟要创建的对象类型的名称来创建. null:只有一个值得数据类型,逻辑上讲,null值表示一个空对象

  • 浅谈JS继承_借用构造函数 & 组合式继承

    2.借用构造函数 为解决原型中包含引用类型值所带来的问题, 我们使用一种叫做 借用构造函数(constructor stealing)的技术(又叫伪造对象或经典继承). 这种技术的基本思想:在子类构造函数内部调用超类型构造函数. 通过使用apply()和call()方法可以在新创建的子类对象上执行构造函数. function SuperType(){ this.colors = ["red", "blue", "green"]; } functi

  • 浅谈JS包装对象

    目录 概述 定义 实例方法 原始类型与实例对象的自动转换 自定义方法 Boolean 对象 概述 Boolean 函数的类型转换作用 Number 对象 概述 静态属性 实例方法 自定义方法 String 对象 概述 静态方法 概述 定义 对象是JavaScript语言最主要的数据类型,三种原始类型的值--数值.字符串.布尔值--在一定条件下,也会自动转为对象,也就是原始类型的"包装对象"(wrapper). 所谓"包装对象",指的是与数值.字符串.布尔值分别相对应

  • 浅谈JS正则表达式的RegExp对象和括号的使用

    RegExp对象的创建: 常规的正则表达式的创建可用直接量,即斜杠 "/" 括起来的字符.但在要求参数变化的环境下,RegExp()构造函数是更好的选择: var reg1 = /'\w+'/g; var reg2 = new RegExp('\'\\w+\'','g'); 对比两种创建方式,RegExp中的第一个参数为要创建的正则字符串,一方面注意,因为不是直接量的表示形式,因此不用斜杠" / "括起来了:而是字符串中必须要对引号" ' "和转

随机推荐