博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript 深入浅出原型
阅读量:5756 次
发布时间:2019-06-18

本文共 2108 字,大约阅读时间需要 7 分钟。

JavaScript 使用 prototypal 原型模型,虽然这经常被当作缺点提及,但是只要善于运用,其实基于原型的继承模型比传统的类继承还要强大。

个人博客排版更佳:

prototypal-ex-1

先聊一聊对象的事情

JavaScript 中,万物皆对象!但对象也是有区别的,主要分为普通对象(Object)和函数对象(Function)。

说好的只聊技术,怎么聊上个人问题了!?

prototype-1

好了,安慰一下,请你吃下面 这道菜!

function example(){};var example2 = function(){};var example3 = new Function('str','console.log(str)');var other = {};var other2 =new Object();var other3 = new example();console.log(typeof other); //object 下面检测一下他们都是些什么类型函数console.log(typeof other2); //objectconsole.log(typeof other3); //objectconsole.log(typeof example); //functionconsole.log(typeof example2); //functionconsole.log(typeof example3); //function

怎么区分普通对象和函数对象呢?!其实很简单,凡是通过 new Function() 创建的对象都是函数对象,其他的都是普通对象;所以 other、other2、other3 为普通对象,而 example、example2、example3 为函数对象。

在 JavaScript 中,每当定义一个函数对象时候,对象中都会包含一些预定义的属性(意思就是这个函数对象一旦被定义就必然会有这些属性)。

其中函数对象的一个属性就是原型对象 prototype;这个属性会指向函数的原型对象。

默认情况下每个原型对象又都会获取一个 constructor 属性,这个属性包含一个指向 prototype 属性所在函数的指针。

普通对象没有prototype,但有 _proto _属性。

让你现出'原型'

来来来,了解完对象,我们该开车上路了(老司机秒懂)

prototype-4

function Dogs(){}Dogs.prototype.name = "Collie";Dogs.prototype.age = 3;Dogs.prototype.DogsName = function(){alert(this.name); };var DogsA = new Dogs();DogsA.DogsName();//"Collie"

prototype-5

上面的代码中,创建了一个 Dogs 函数,这时候它就会拥有一个 prototype 属性,这个属性指向了 Dogs Prototype 原型对象,而这个原型对象拥有一个 constructor (构造函数) 属性,其指针指向了 Dogs,就是 prototype 属性所在的函数 Dogs;当你创建一个对象实例( DogsA,就是这条语句:var DogsA = new Dogs(); )的时候,同样会拥有一个 prototype 属性;这个 prototype 属性会指向其原型对象,而不是直接指向其构造函数 Dogs。

重点:实例对象是通过原型对象与构造函数取得联系的。

原型链,老司机,深入一些!

JS 在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做 proto 的内置属性,用于指向创建它的函数对象的原型对象 prototype。

prototype-9

我们可以测试一下,以上面的代码为例:

console.log(DogsA._proto_ === Dogs.prototype) //true

同样,Dogs.prototype对象也有 _proto _ 属性,它指向创建它的函数对象(Object)的 prototype

console.log(Dogs.prototype._proto_ === Object.prototype) //true
你瞧,证明了你 DogsA 是我 Dogs 实例化出来的对象出来的。

好了继续,Object.prototype对象也有 _proto _属性,但它比较特殊,为 NULL

console.log(Object.prototype._proto_) //null

我们把这个有 proto 串起来,直到 Object.prototype.__proto_ _为 NULL 的链就叫做原型链。

prototype-7

总结

  • 原型和原型链是 JS 实现继承的一种模型。

  • 原型链的形成是真正是靠 _proto _ 的,而不是 prototype。

  • 所有的原型对象都有 constructor 属性,该属性对应创建所有指向该原型的实例构造函数。

  • 函数对象和原型对象通过 prototype 和 constructor 属性进行相互关联。

该文章部分知识网络整理

转载地址:http://ervkx.baihongyu.com/

你可能感兴趣的文章
修改hosts文件里面的主机名,oralce asm无法启动
查看>>
Maven学习总结(十)——使用Maven编译项目gbk的不可映射问题
查看>>
php5编译安装常见错误和解决办法集锦
查看>>
Linux远程访问及控制
查看>>
MongoDB实战系列之五:mongodb的分片配置
查看>>
Unable to determine local host from URL REPOSITORY_URL=http://
查看>>
java基础(1)
查看>>
ORACLE配置,修改tnsnames.ora文件实例
查看>>
Workstation服务无法启动导致无法访问文件服务器
查看>>
.Net组件程序设计之远程调用(二)
查看>>
ant中文教程
查看>>
Linux常用命令(一)
查看>>
WSUS数据库远端存储条件下切换域及数据库迁移
查看>>
【VMCloud云平台】SCAP(四)租户(一)
查看>>
linux释放内存的方法
查看>>
基于 Android NDK 的学习之旅----- C调用Java
查看>>
我的友情链接
查看>>
Android图形显示系统——下层显示4:图层合成上(合成原理与3D合成)
查看>>
Windows 10 技术预览
查看>>
Tomcat http跳转https
查看>>