Javascript原型链梳理

先来个简单的代码:

function Info(name, age){    this.name = name;    this.age = age;    this.message = function () {        console.log(this.name + "is" + this.age + "year‘s old");    }}var lynn = new Info("Lynn", 20);  

构造函数的首字母一般大写,用来区分于普通函数,使用 new 调用,没有返回值,得到的对象成为该函数的一个实例。构造函数的prototype属性,称为原型属性,是一个隐藏属性,指向一个是object类型,称为原型对象。
 构造函数原型对象的 constructor 属性 始终指向构造函数本身。
 fn.prototype.constructor === fn;

  • 对于所有的对象,都有proto属性,这个属性对应该对象的原型
  • 对于函数对象,除了proto属性之外,还有prototype属性,当一个函数被用作构造函数来创建实例时,该函数的prototype属性值将被作为原型赋值给所有对象实例(也就是设置实例的proto属性)

当一个函数被用作构造函数来创建实例时,该函数的prototype属性值将被作为原型赋值给所有对象实例(也就是设置实例的proto属性),也就是说,所有实例的原型引用的是函数的prototype属性。
  lynn.proto ===Info.prototype

  在构造函数的原型上面附加的属性或者方法, 可以被其所有的实例共用.

当代码获取某个对象的属性时,首先会在对象实例本身内查找,如果查找不到,就会向上搜索其原型对象。为实例添加一个属性时,这个属性会屏蔽原型对象中的    同名属性。若想访问原型对象中的属性值,需要使用delete将这个同名属性在实例中彻底删除。(注意:使用delete删除构造函数中的属性将把实例的原型对象中的属性也删除即如果把name放在Person()中,使用delete,person2的name将不存在)

function Info() {};
Person.prototype.name = ‘Lily‘;
Person.prototype.age = 18;
var info1 = new Info();
var info2 = new Info();
info2.name = "Tom";
console.log(info1.name);// Lily
console.log(info2.name); // Tom
delete.info2.name;
console.log(info2.name); // Lily

一个属性能够访问时(无论是在实例还是原型对象中)in操作符都会返回true,所以当in操作符返回true。hasOwnProperty("属性名")可以检测一个属性是存在于实例还是原型对象中,其返回值true代表存在于实例中,false代表存在于原型对象中。

原型对象本身同样拥有一个内部属性 [[prototype]], 指向当前构造函数的构造函数的原型对象.这种由原型对象构建而成的链表, 就是原型链.原型链存在的意义, 在于尽可能的共用方法和属性. 或者其他更多的我不知道的意义.

在JavaScript语言中,所有对象的原型链根节点都是Object.prototype。Object.prototype值是无法修改,它提供了一些默认的方法。且它的proto等于null!

instanceof是一个二元运算符,如:A instanceof B. 其中,A必须是一个合法的JavaScript对象,B必须是一个合法的JavaScript函数 (function). 判断过程如下:

如果函数B在对象A的原型链 (prototype chain) 中被发现,那么instanceof操作符将返回true,否则返回false.

所以导致了:

Function instanceof Object;     //true
Object instanceof Function;     //true
Function instanceof Function;   //true
Object instanceof Object;       //true

这样的情况发生!

原文地址:https://www.cnblogs.com/Lynnyandy/p/10716573.html

时间: 2024-11-11 02:49:33

Javascript原型链梳理的相关文章

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

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原型链的个人理解

首先js是一种面对对象的语言,虽然大多数时候是以面对过程的形式展现出来.先来看一段代码: function Base() { this.name = 'tarol'; } function Sub() { this.age = 18; } var b = new Base; Sub.prototype = b; var s = new Sub; console.log(s.name); //'tarol' 结果相信都知道,但是实现的原理却不明,于是逐行解析: Sub.prototype = b;

8条规则图解JavaScript原型链继承原理

原形链是JS难点之一,而且很多书都喜欢用一大堆的文字解释给你听什么什么是原型链,就算有图配上讲解,有的图也是点到为止,很难让人不产生疑惑. 我们先来看一段程序,友情提示sublimeText看更爽: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg

图解Javascript原型链

本文尝试阐述Js中原型(prototype).原型链(prototype chain)等概念及其作用机制.上一篇文章(图解Javascript上下文与作用域)介绍了Js中变量作用域的相关概念,实际上关注的一个核心问题是:“在执行当前这行代码时Js解释器可以获取哪些变量”,而原型与原型链实际上还是关于这一问题. 我们知道,在Js中一切皆为对象(Object),但是Js中并没有类(class):Js是基于原型(prototype-based)来实现的面向对象(OOP)的编程范式的,但并不是所有的对象