JavaScript之面向对象学习四原型对象的动态性
1、由于在原型中查找值的过程是一次搜索,因此我们对原型对象所做的任何修改都能够立即从实例上反映出来---即便是先创建了实例后修改原型也是如此。代码如下:
function Person(){ } var friend=new Person(); Person.prototype.sayHello=function(){ alert("Hello"); } friend.sayHello(); //输出:Hello
上面这段代码先创建了Person的一个实例,并将其保存在friend中。接着下一个代码块在Person.prototype(Person的原型属性对对象)中添加了一个方法sayHello();
根据输出,我们发现即使friend实例是在添加新方法之前创建的,但它任然可以访问这个新方法。
其原因可以归结为实例与原型之间的松散连接关系,当我们调用friend.sayHello()时,首先会在实例中搜索名为sayHello的属性方法,如果实例属性中没有,则会继续去搜索原型。而原型与实例之间是通过[[prototype]]指针相连接的(实例通过[[prototype]]指针指向原型属性对象来调用原型中的方法和属性),正因为[[prototype]]是一个指针,并不是Person的副本,所以即使修改(添加)原型的方法在创建完实例之后,该实例任然可以访问完成修改之后的原型对象!
2、尽管利用上面所说的实例与连接的松散连接关系,我们可以随时为原型添加属性和方法,并且修改能够在所有的实例中反映出来。
但是如果重写整个原型对象,那么情况就不一样了,在前面的随笔中曾说过,当调用构造函数创建一个对象实例时JS会为实例添加一个指向最初原型(也就是Person.prototype)的[[prototype]]指针,而像下面的代码中那样,把原型修改成另外一个对象,并不能改变实例中的[[prototype]]指针的值(说明白点,就是实例还是指向最初原型);
注意:实例中的[[prototype]]仅指向最初原型;
function Person(){ } var friend=new Person(); Person.prototype={ constructor:Person, name:"张三", age:22, sayHello:function(){ alert("Hello James"); } }; friend.sayHello(); //error 控制台报错!
从上面的图我们可以看出,重写原型对象之后,并没有是对象实例的[[prototype]]指针的值发生改变,它还是指向最初的原型对象。
相关文章
- javascript内置对象速查(一)
- 细说JavaScript对象(1):对象的使用和属性
- [Javascript] Natively Format JavaScript Dates and Times
- [Javascript] Hide Properties from Showing Up in "for ... in" Loops in JavaScript
- [Javascript] Coding interview problem: Scheduler functional way
- [Algorithms] Refactor a Loop in JavaScript to Use Recursion
- [Javascript] Understanding the .constructor property on JavaScript Objects
- javascript document.write
- javascript: 复制对象时的深拷贝及浅拷贝(chrome 105.0.5195.125)
- 由闭包引起的对javascript代码可维护性的思考
- [Javascript] Regex: '$`', '$&', '$''
- Javascript中的内置对象—数组
- 使用JavaScript调用Microsoft XMLDOM库进行XML字符串的解析
- 一个百度贴吧下载指定单个帖子所有回复的工具(JavaScript)实现
- 使用JavaScript正则表达式解析markdown里的图片标签
- 从零开始学_JavaScript_系列(22)——dojo(9)(表单、JsonRest的post方法,widget的使用思路)
- 从零开始学_JavaScript_系列(16)——CSS<3>(文本、对齐、圆角、盒模型、背景)
- 【华为OD机试 2023】 处理器问题(C++ Java JavaScript Python)
- JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
- javascript --- 事件托付
- Javascript中String对象的的简单学习
- JavaScript事件收集
- web前端Javascript学习之了解JavaScript弹出框
- JavaScript RegExp 对象
- 【阅读笔记】你不知道的Javascript--强制类型转换4