JavaScript原型链学习

function foo(){}
foo.prototype.z = 3;

var obj = new foo();
obj.y = 2;
obj.x = 1;

obj.x; //1
obj.y; //2
obj.z; //3
typeof obj.toString; //‘function‘
‘z‘ in obj; //true
obj.hasOwnProperty(‘z‘); //false

首先,我们通过function foo()去定义一个函数对象。。那么,foo()对象自动带有prototype对象属性,如图所示添加了z属性。再通过new构造器,构造obj对象,如图所示,obj的原型指向构造器的prototype属性也就是foo.prototype。

再看例子:obj.x和obj.y会在obj对象上找到x,y属性,而obj上没有z属性,当obj.z时,obj上没有z,此时就会查找原型上的属性,发现z=3。

foo.prototype的原型是Object.prototype,Object.prototype的原型是null。Object.prototype的作用是:如图所示,typeof obj.toString是一个‘function’,而在ibj以及它的原型上都找不到toString方法,而js中默认的对象上基本都有toString方法,是因为他们的原型指向null之前都会指向Object.prototype,toString正是Object.prototype上的方法。

obj. hasOwnProperty(‘z‘)返回false,表示z属性并不是直接为obj的属性。

obj.z = 5;

obj.hasOwnProperty(‘z‘); //true
foo.prototype.z; //still 3
obj.z; //5

obj.z = undefined;
obj.z; //undefined

delete obj.z; //true
obj.z; //3

delete obj.z;  //true
obj.z; //still 3!!!

像代码中所写,obj.z = 5;对于赋值来说,先在obj对象上查找,如果没有,此时不会在原型链中查找,而是在这个对象上添加z=5;foo.prototype.z依旧为3。

当obj.z=undefined时,obj对象上z属性的值被修改为undefined,所以返回undefined时不一定代表不存在。

当delete obj.z后,拿到z的值为原型上的z的值。obj上的z属性已经被删除。

原型链上大部分属性的 Enumerable(可枚举)标签都是false,也就是说console.log一个对象的时候都只显示自己的对象,而在控制台能看到很多属性

属性标签有:value:true,writeable:true(是否可写),enumerable:true(是否可枚举),configurable:true(表示前面这些属性是否可修改)

时间: 2024-10-31 17:37:17

JavaScript原型链学习的相关文章

JavaScript 原型链学习(一)原型对象

在JavaScript中创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有的实例共享的属性和方法.如果按照字面意思来理解,那么prototype就是通过调用构造函数而创建那个实例的原型对象.使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法.换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中,如下例所示: function Person(){} Person.protot

JavaScript 原型链学习(三)原型对象存在的问题 与 组合使用构造函数和原型

原型对象也不是没有缺点.首先,它省略了为构造函数传递初始化参数这一环节, 结果所有实例在默认情况下都将取得相同的属性值.虽然这会在某种程度上带来一些不方便, 但还不是原型对象的最大问题.原型对象的最大问题是由其共享的本性所导致的.原型中所有属性是被很多实例共享的,这种共享对于函数非常合适.对于那些包含基本值的属性倒也说得过去,毕竟(如前面的例子所示),通过在实例上添加个同名属性, 可以隐藏原型中的对应属性.然而,对于包含引用类型值的属性来说,问题就比较突出了.来看下面的例子. function

JavaScript学习总结(十七)——Javascript原型链的原理

一.JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.在JavaScript中,用 __proto__ 属性来表示一个对象的原型链.当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止! 比如现在有如下的代码: 扩展Object类,添加Clone和Extend方法 1 /*扩展Object类,添加Clone,JS实现克隆的方法*/ 2 Ob

深入理解JavaScript原型链

前言 最近碰到一个题,大家可以试下. Object.prototype.a = function() { console.log("aaa "+this.name); }; Function.prototype.b = function() { console.log("bbb "+this.name); }; function Person(name) { this.name = name; } var person = new Person("Chin

轻松搞定javascript原型链 _proto_

//如有错误或不同观点,欢迎批评与讨论!首先,prototype出现的目的,是为了解决 代码重用 的问题 , prototype 相当于是在内存上划分出一个公共的区域, 专用于存放 实例化对象 的相同方法或属性, 一份代码,人人可用:为方便理解,我们可以先把prototype 当作是CSS中的 class,在prototype上加方法和属性,那么其它对象就会拥有这些方法和属性, 但这些代码紧有一份!<script>function Person(){this.name = '张三'; this

Javascript 原型链资料收集

Javascript 原型链资料收集 先收集,后理解. 理解JavaScript的原型链和继承 https://blog.oyanglul.us/javascript/understand-prototype.html 继承与原型链 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain 最详尽的 JS 原型与原型链终极详解,没有「可能是」. https://www.j

明白JavaScript原型链和JavaScrip继承

原型链是JavaScript的基础性内容之一.其本质是JavaScript内部的设计逻辑. 首先看一组代码: 1 <script type="text/javascript"> 2 function parent(){ 3 this.name="cehis"; 4 } 5 6 function son(){ 7 this.age=11; 8 } 9 10 function sub(){ 11 this.sex="nan"; 12 }

web前端安全-JavaScript 原型链污染

0x01 前言 最近看到一篇原型链污染的文章,自己在这里总结一下 0x02 javascript 原型链 js在ECS6之前没有类的概念,之前的类都是用funtion来声明的.如下 可以看到b在实例化为test对象以后,就可以输出test类中的属性a了.这是为什么呢? 原因在于js中的一个重要的概念:继承. 而继承的整个过程就称为该类的原型链. 在javascript中,每个对象的都有一个指向他的原型(prototype)的内部链接,这个原型对象又有它自己的原型,直到null为止 functio

javascript原型原型链 学习随笔

理解原型和原型链.需从构造函数.__proto__属性(IE11以下这个属性是undefined,请使用chrome调试).prototype属性入手. JS内置的好多函数,这些函数又被叫做构造函数.如:Object---Array---Function---Math---Date---String---Number---Boolean---Symbol---RegExp. JS里,所有的对象,都是其构造函数的实例.如{}是Object的一个实例,[]是Array的一个实例.fn() {}是Fu