美文网首页饥人谷技术博客
初识JS原型与原型链

初识JS原型与原型链

作者: show_萧佩 | 来源:发表于2019-03-16 15:57 被阅读3次

    对于第一次学习JS的人说,原型与原型链是两个绕不开的概念,这既是难点也是重点。下面我们来初步认识一下这两个概念,从如下几个方面谈起

前言

与大部分面向对象语言不同,JavaScript中并没有引入类(class)的概念,但JavaScript仍然大量地使用了对象,为了保证对象之间的联系,JavaScript引入了原型与原型链的概念。

1.全局对象

什么是全局对象,说通俗一点就是脚本在任意地方都可以调用的对象,在浏览器中即是Windows对象

这种对象可以分为两种,第一种是ECMAScript规定的例如parseInt 、 parseFloat,以及Number() 、Boolean() 、String() 、Object()

另外一种是浏览器自带的,在不同的浏览器中表现形式不一样alert() 、prompt() 、confirm() 、console() , document 、history

注意 1.window对象中例如 alert(),可以直接写作alert( ),也可以写作 window.alert()

2.简单类型与对象

声明一个数值类型的变量

两种方式,它们在内存中的存储方式是不同的,n1是直接声明简单的数据类型(number),存储在stack栈内存中,而n2是声明了一个对象stack内存中存储着该对象的内存地址,对象的内容存储在heap堆内存中。

但是在平常写代码的时候我们没有使用n2的写法,也可以使用valueOf() 方法 和toSting()方法。

原因是:JS使用妙计:临时转换(用完了就没了),如果你使用n1的写法,调用了了如valueOf方法,那么JS会创建一个临时的对象,然后调用该对象的方法,调用结束后临时对象就会被垃圾回收掉

3.Numer对象

Number对象

Number|的常用属性含义

Number.valueOf()   |   获取对象本身的值

Number.toString()    |   将数值转化为字符串

Number.toFixed()     |    将其转换为小数

Number.toExponential()    将其转化为科学计数法

4.原型与原型链

JavaScript中所有对象都有toString和valueOf属性,给每个对象一个toString和valueOf显然会造成极大的浪费。为此,JS的做法是将toString和valueOf放在一个对象里,然后让每一个对象的__proto__来存储这个公共属性的地址。这个公共属性就是原型(proto)

每一个构造函数都拥有一个prototype属性,这个属性指向一个对象,也就是原型对象。当使用这个构造函数创建实例的时候,prototype属性指向的原型对象就成为实例的原型对象。

原型对象默认拥有一个constructor属性,指向指向它的那个构造函数(也就是说构造函数和原型对象是互相指向的关系)。

每个对象都拥有一个隐藏的属性[[prototype]],指向它的原型对象,这个属性可以通过Object.getPrototypeOf(obj)或obj.__proto__来访问。

实际上,构造函数的prototype属性与它创建的对象的[[prototype]]属性指向的是同一个对象,即

对象.__proto__ === 函数.prototype

原型链

JavaScript中所有的对象都有原型对象。而原型对象自身也是一个对象,它也有自己的原型对象,这样层层上溯,就形成了一个类似链表的结构,这就是原型链(prototype chain)。

所有原型链的终点都是Object函数的prototype属性,因为在JavaScript中的对象都默认由Object()构造。Objec.prototype指向的原型对象同样拥有原型,不过它的原型是null,而null则没有原型。

参考:https://juejin.im/post/5a94c0de5188257a8929d837

相关文章

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • Javascript(三)之原型继承理解

    进阶路线 3 原型继承 3.1 优秀文章 最详尽的 JS 原型与原型链终极详解 一 最详尽的 JS 原型与原型链终...

  • 初识JS原型与原型链

    对于第一次学习JS的人说,原型与原型链是两个绕不开的概念,这既是难点也是重点。下面我们来初步认识一下这两个概念,从...

  • web前端面试之js继承与原型链(码动未来)

    web前端面试之js继承与原型链(码动未来) 3.2.1、JavaScript原型,原型链 ? 有什么特点? 每个...

  • JS原型链

    1什么是JS原型链? 通过__proto__属性将对象与原型对象进行连接. 1.1 JS原型链的作用? 组成的一个...

  • js_继承及原型链等(四)

    js_继承及原型链等(三) 1. 继承 依赖于原型链来完成的继承 发生在对象与对象之间 原型链,如下: ==原型链...

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • JS的__proto__和prototype

    最近在回顾JS的原型和原型链的知识,熟悉JS的同学都知道JS的继承是靠原型链实现的,那跟原型链相关的属性__pro...

  • JS闭包问题(一)

    之前我写过一篇JavaScript原型与原型链的文章,此属于JS中的重难点。 而闭包,是JS中除了原型链之外又一个...

  • javascript中的原型链与继承

    javascript中的原型链与继承javascipt中的原型链和继承机制是这门语言所特有的,但js中的原型机制也...

网友评论

    本文标题:初识JS原型与原型链

    本文链接:https://www.haomeiwen.com/subject/vmgqmqtx.html