Javascript原型链(二)
来源:互联网 发布:第九届网络攻防大赛 编辑:程序博客网 时间:2024/06/01 08:45
上一篇文章粗略的理解了一下什么是原型和原型链概念。这篇文章记录一下自己对创建对象的过程的深入理解。
一、new创建对象的过程
首先我们都知道javascript创建一个对象的方式可以是使用构造函数方式。比如:
<script type="text/javascript"> function Person(name,age){ this.name=name; this.age=age; // return this; } var p1=new Person("xiaoming",18);</script>
这是常见的使用构造函数创建一个对象。其中p1是通过传入参数的方式创建一个新的实例。那么它的背后的原理是通过new关键字进行创建的。我们从var p1=new Person("xiaoming",18);
这段代码开始。首先我们是定义一个变量p1保存属性值,当通过new这个关键字的时候,会回到Person()这个构造函数中,this代表的是创建空对象,当我传入的参数成功,那么默认会执行return this;
这个语句,其意思就是返回一个对象,返回之后再赋值给变量p1。
总的来说就是这样:
new Person() —– this变成空对象 —–return this返回结果 —-赋值p1
这就是构造函数创建实例的过程。
二、常见的构造函数的写法
var a={} // 相当于var a = new Object()var array=[] // 相当于var array = new Array()var function(){} //相当于var function = new Function(){}
所以function其实就是一个对象。如何判断某一个变量属于哪个构造函数,可使用 instanceof
关键字,代码如下:
<script type="text/javascript"> var a={} var b={} function Func(){}</script>
运行结果如下:
三、原型规则
所有引用类型(数组、对象、函数),都具有对象特性
所有引用类型(数组、对象、函数),都有一个__proto__
指针,即隐式原型
所有的函数,都有一个prototype属性,属性值也是一个普通的对象,即显示原型
所有的引用类型(数组、对象、函数),__proto__
指向它的构造函数的prototype
属性值
当某一个对象没有其属性值时,会通过__proto__
属性向上查找。
```<script type="text/javascript"> var a={} var b={} function Func(){}</script>
从上述的代码可知,a instanceof Object
等于true,说明Object是对象a的原型。那么Object也是一个构造函数,函数都有一个prototype属性,按照上述的原型规则。
a.__proto__ === Object.prototype //true
针对于第四个规则,贴上代码:
function Foo(name){ this.name=name; } Foo.prototype.FooName=function(){ console.log('I am Foo!! '); } var f = new Foo('zhangsan'); f.HooName= function(){ console.log('I am Hoo!!') }
当f这个对象找不到其方法时,会通过__proto__
属性去向上查找(也就是根据原型构造函数的prototype属性去查找)。运行效果:
此时为了验证结果的正确性,也就是验证FooName并不是对象f的属性,我们可以使用hasOwnProperty
这个方法,我们在后面添加一段代码。
var item; for (item in f){ if(f.hasOwnProperty(item)){ console.log(item); } }
运行结果如图:
这就是原型链,如果上面没有就继续往上找。
- Javascript原型链(二)
- JavaScript之原型链(二)
- html javascript原型(二)
- JavaScript中的原型(链)&继承(二)
- JavaScript中原型学习基本理解(原型链: prototype _proto_)(二)
- 深入理解JavaScript系列(二): 原型、原型链与继承
- Javascript 悟二 prototype 原型链
- javascript 学习笔记二【原型链模式】
- javascript原型链详细解析(二)
- Javascript(二)-06-(原型练习)
- JavaScript学习(二):原型继承
- JavaScript原型,原型链
- JavaScript-原型、原型链
- JavaScript原型,原型链
- JavaScript-原型、原型链
- Javascript继承(原型链)
- JavaScript原型对象、原型属性、原型链
- javascript原型和原型链
- 正则中?:问好冒号的使用
- 2017年度最流行的十大中国开源软件
- 使用sqoop从Oracle或mysql抽取数据到HDFS遇到的报错及解决
- Git push 代码报错
- 6-4 线性探测法的查找函数
- Javascript原型链(二)
- python学习之路day2-循环
- Linux下原子操作函数
- HTML学习小结之HTML标签
- 【腾讯TMQ】Appium:轻松玩转app+webview混合应用自动化测试
- 数独解法的Python实现
- UVa 508 摩斯码匹配单词
- transwarp Slipstream 简介之高级功能
- 从0到1,开启vue_mobile---横竖屏需求处理