小笔记:JS原型和原型链

2019-05-20 admin

JS原型?

有句简洁直观的描述:“原型是Javascript中的继承的基础,JavaScript的继承就是基于原型的继承”。

在JavaScript中,原型也是一个对象,通过原型可以实现对象的属性继承,JavaScript的对象中都包含了一个"[[Prototype]]"内部属性,这个属性所对应的就是该对象的原型。

"[[Prototype]]“作为对象的内部属性,是不能被直接访问的。所以为了方便查看一个对象的原型,Firefox和Chrome中提供了__proto__这个非标准(不是所有浏览器都支持)的访问器(ECMA引入了标准对象原型访问器"Object.getPrototype(object)”)。在JavaScript的原型对象中,还包含一个"constructor"属性,这个属性对应创建所有指向该原型的实例的构造函数。


提到原型,我们必须要了解下Object和Function:

Object和Function都是JS的自带函数,Object继承自己,Funtion继承自己,Object和Function互相是继承对方,也就是说Object和Function都既是函数也是对象。
//instanceof 就是判断一个实例是否属于某种类型
console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true

前面提到为了方便查看一个对象的原型,引入"proto",那么Function和Object对应的原型是什么?

console.log(Function.__proto__); // ƒ () { [native code] }
console.log(Object.__proto__);  // ƒ () { [native code] }
console.log(Function.__proto__==Function.prototype); //true
console.log(Object.__proto__==Function.prototype); //true

所以,Object 是 Function的实例,而Function是它自己的实例。

说到Function和Object的相互继承和对应原型,可能觉得有点头大,那我们先放一下,让我们先了解下js对象的一些小知识

普通对象和函数对象

万物皆对象,js中对象其实分为函数对象和普通对象。 函数对象可以创建普通对象,普通对象没法创建函数对象,所以普通对象权利最低。

//普通对象
let str=new String();
let num=new Number();
let obj=new Object();
//....

凡是通过new Function创建的对象都是函数对象,其他都是普通对象(通常通过Object创建),可以通过typeof来判断。

function f1(){}; // ==  var f1 = new Function();

function f2(a,b){
  alert(a+b);
}
//等价于
var f2 = new Function(a,b,"alert(a+b)");

说那么多,其实记住下面的内容就好了:

1.每一个函数对象都有一个prototype属性,但是普通对象是没有的;prototype下面又有个construetor,指向这个函数。

2.每个对象都有一个名为_proto_的内部属性,指向它所对应的构造函数的原型对象,原型链基于_proto_;


让我们建一个普通函数,可以看到:

var obj = {};
  console.log(obj.prototype); //undefined
  console.log(obj instanceof Object); //true
  console.log(obj.__proto__ === Object.prototype) //true
  console.log(Object === Object.prototype.constructor) //true
  console.log(Object.prototype.constructor) //function Object()
 console.log(Object.prototype.__proto__); //null

clipboard.png

  • obj的确没有prototype属性
  • obj是Object的实例
  • obj的__proto__指向Object的prototype
  • Object.prototype.constructor指向Object本身

再建一个函数对象:

function Fun(){};
var f1 = new Fun();
console.log(f1.prototype); //undefined
console.log(f1 instanceof Fun); //true
console.log(f1.__proto__ === Fun.prototype); //true
console.log(Fun=== Fun.prototype.constructor) ;//true
console.log(Fun.prototype.__proto__ === Object.prototype) ;//true
console.log(Object.prototype.__proto__); //null

clipboard.png

  • Fun是函数对象,f1还是普通对象
  • f1是Fun的实例
  • Fun的原型prototype的__proto__指向Object的原型prototype,而Object的原型prototyped的__proto__指向null;

原型链

ECMscript中描述了原型链的概念,并将原型链作为js实现继承的主要方法。
基本思路:利用原型,让一个引用类继承另一个引用类的属性和方法。
构造函数、原型和实例的关系:
    每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

其实,avascript中,每个对象都会在内部生成一个proto 属性,当我们访问一个对象属性时,如果这个对象不存在就回去proto 指向的对象里面找,一层一层找下去,这就是javascript原型链的概念。

f1.__proto__ ==> Fun.prototype ==> Fun.prototype.__proto__ ==> Object.prototype ==> Object.prototype.__proto__ ==> null

JS世界中所有的东西都是对象,所有的东西都由Object衍生而来, 所以所有东西原型链的终点指向null

[转载]原文链接:https://segmentfault.com/a/1190000019239824

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65401.html

文章标题:小笔记:JS原型和原型链

相关文章
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"&gt...
2017-02-17
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
回到顶部