Object.prototype 原型和原型链

原型

Javascript中所有的对象都是Object的实例,并继承Object.prototype的属性和方法,有些属性是隐藏的。换句话说,在对象创建时会存在预定义的属性,其中有一个属性就是原型对象。在函数对象中存在原型对象prototype,在普通对象中没有prototype,但存在__proto__。或者说使用function定义的对象与使用new操作符生成的对象之间有一个重要的区别,这个区别就是function定义的对象有一个prototype属性,使用new生成的对象就没有这个prototype属性,存在__proto__

var o =new Object();
console.log(o.__proto__);
console.log(o.prototype);//undefinedvar fn = function(){}
console.log(fn.prototype);//Object {constructor: function}
var f1 = new fn();
console.log(f1.__proto__);
console.log(f1.__proto__===fn.prototype);//true

原型链

那么__proto__是什么?每个对象都会在其内部初始化一个属性,就是__proto__
普通对象中的__proto__是什么呢? Object的本质函数对象,是通过new Function()创建,所以Object.__proto__指向Function.prototype。同理,Function也是函数对象,因此Function.__proto__同样指向Function.prototypeObject.prototype对象也有__proto__属性,但它比较特殊,为null。这个由__proto__串起来的直到Object.prototype.__proto__为null的链就是原型链。

console.log(Object.__proto__ === Function.prototype);//true
console.log(Function.__proto__===Function.prototype);//true
console.log(Object.prototype.__proto__);//null

当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。参考下面的例子:

var Fn = function(){};
Fn.prototype.Hello = function(){console.log("Hello World");}
var f1 = new Fn();
f1.Hello();//Hello World

首先var f1=new fn(),f1是Fn的实例,可以得出f1.__proto__=Fn.prototype。当我们调用f1.hello()时,首先f1中没有Hello这个属性,于是,它会到他的__proto__中去找,也就是Fn.prototype,而我们在上面定义了 Fn.prototype.Hello=function(){}; 于是,就找到了对应的方法。
从一个更复杂的例子中看原型链的原理:

var Person = function() {};
Person.prototype.Name = function() {console.log("person name");
}
Person.prototype.Sex = "male or female";var Younger = function() {};
Younger.prototype = new Person();
Younger.prototype.Age = function() {console.log("14-28")
};
Younger.prototype.Sex = "female";var Ann = new Younger();
Ann.Name(); //person name
console.log(Ann.Age()); //14-28
console.log(Ann.Sex); //female

对上述代码,我们可以进行如下分析:
var Younger = function() {}===>:Younger.__proto__=Person.prototype,
Younger.prototype = new Person()===>:Younger.prototype.__proto__ = Person.prototype,
var Ann = new Younger()===>Ann.__proto__=Younger.prototype,
综上可得:
Ann.__proto__.__proto__ = Person.prototype

Ann本身没有Name()方法,于是从Ann.__proto__(Younger.prototype)中找,仍没有找到于是在向上一层Ann.__proto__.__proto__(Person.prototype)中寻找,最终在Person.prototype中找到对应的方法并调用。
同理,Ann本身并没有Age()方法,但在Ann.__proto__(Younger.prototype)存在。
对于Ann.Sex,在Ann.__proto__(Younger.prototype)中已经能够找到,便不再向上寻找,因此输出是female

转载于:https://www.cnblogs.com/Nancy-wang/p/6903221.html

Object.prototype 原型和原型链相关推荐

  1. 原型和原型链的理解(Function,Object特例深入理解)

    原型我们可以分为显式原型和隐式原型. 显式原型: 每个函数都有一个prototype属性,即显式原型(属性),它默认指向一个object空对象(称为原型对象): 而原型对象中有一个属性construc ...

  2. JavaScript原型与原型链(总结篇)

    系列文章推荐 JavaScript原型与原型链(基础篇) JavaScript原型与原型链(进阶篇) JavaScript原型与原型链(总结篇) 1 构造函数和实例对象 构造函数的prototype属 ...

  3. 的函数原型_JS基础函数、对象和原型、原型链的关系

    JS的原型.原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对 ...

  4. JavaScript深入之从原型到原型链

    JavaScript深入系列的第一篇,从原型与原型链开始讲起,如果你想知道构造函数的实例的原型,原型的原型,原型的原型的原型是什么,就来看看这篇文章吧. 构造函数创建对象 我们先使用构造函数创建一个对 ...

  5. 关于javascript的原型和原型链,看我就够了(一)

    关于js的原型和原型链,有人觉得这是很头疼的一块知识点,其实不然,它很基础,不信,往下看 要了解原型和原型链,我们得先从对象说起 创建对象 创建对象的三种方式: 对象直接量 通过对象直接量创建对象,这 ...

  6. 【进阶5-1期】重新认识构造函数、原型和原型链

    引言 前端进阶系列已经到第 5 期啦,本期正式开始原型 Prototype 系列. 本篇文章重点介绍构造函数.原型和原型链相关知识,如果你还不知道 Symbol 是不是构造函数.constructor ...

  7. 【前端基础】盘根错节的寄生世界之原型和原型链

    前言 原型链虽然概念上比较简单,用了奇怪的姿势模拟了继承的功能性,但是在整个Javascript的世界里面,它的的关系错综复杂,很容易被它们之间的关系绕进去 __ proto __ ,[[protot ...

  8. JavaScript高级day02-AM【函数的prototype、显式原型与隐式原型、原型链】

    笔记.视频.源码:JavaScript(基础.高级)笔记汇总表[尚硅谷JavaScript全套教程完整版] 目   录 P15 15.尚硅谷_JS高级_函数的prototype 15:04 1. 函数 ...

  9. JS中的prototype、__proto__与constructor,原型和原型链

    理解原型的几个关键点: 1.所有的引用类型(数组.函数.对象)可以自由扩展属性(除null以外); 2.所有的引用类型(对象)都有一个'_ _ proto_ _'属性(也叫隐式原型,它是一个普通的对象 ...

最新文章

  1. 2006年下半年 网络工程师 上下午试卷【附带答案】
  2. VC 2.5 与 ESX 3.0.1 之间存在接口问题
  3. aspx 与 ashx cs
  4. Python 技术篇-在cmd命令提示行里模拟动态下载进度条实例演示,cmd清除日志、打印动态内容方法
  5. 数学国里有座天才云集的“疯人院”
  6. 楼梯计算机公式,各种楼梯面积的计算公式汇总
  7. 神经网络其实并不需要那么深!普林斯顿大学英特尔提出ParNet,12层的网络就能达到80%以上的准确率!...
  8. lxcfs容器隔离技术实现原理分析之loadavg、cpuonline
  9. vue 多个回调_Vue 进阶面试必问,异步更新机制和 nextTick 原理
  10. 在虚拟机下安装Linux
  11. KDE桌面没有wifi的解决方案
  12. C++ std::set operator <= find失效 erase失效 解决方案
  13. 121 Python程序中的线程操作-线程定时器
  14. Momentum动量法
  15. mi5x的Android的版本,小米5XMIUI11最新稳定版刷机包(最新系统完整固件升级吧安卓8.0)...
  16. 如何批量保存网页照片
  17. react-custom-scrollbars滚动组件
  18. Python 爬虫监控女神的QQ空间新的说说,实现秒赞,并发送说说内容到你的邮箱
  19. 微信APP退款功能开发
  20. shell 分割文本_shell教程(2):积木游戏之认识积木--重要的系统命令

热门文章

  1. java 图片去除黑边_根据 Map 上的变量绘制彩色和形状的点时,保持符号的黑色边框(geom_point)...
  2. php超强后门在任意位置创建文件,php大马:.user.ini文件构成的超强PHP后门
  3. 硬币问题——固定终点的最长路和最短路
  4. Ubuntu镜像下载地址
  5. LeetCode 454. 四数相加 II 思考分析
  6. 各抓包软件的之间差异_系统软件和应用程序软件之间的差异
  7. 使用OpenCV python模块读取图像并将其另存为灰度系统
  8. stl vector 函数_vector :: push_back()函数,以及C ++ STL中的示例
  9. 线性结构节点类型(三)
  10. vs 2019编写汇编并运行调试