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);//undefined var 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

Object.prototype 原型和原型链的更多相关文章

  1. js原型和原型链,以及__proto__、prototype属性

    __proto__和prototype属性: 1.__proto__属性: 在JS里,万物皆对象(函数是对象.原型也是对象...).对象都具有属性__proto__,这个属性会指向该对象的原型. 2. ...

  2. JavaScript深入之从原型到原型链(本文转载)

    JavaScript深入之从原型到原型链(本文转载) https://github.com/mqyqingfeng/Blog.原文地址 构造函数创建对象 我们先使用构造函数创建一个对象: functi ...

  3. 彻底搞懂js原型与原型链

    原生的原型链 function fn(){},fn 为 Function的一个实例,原型链为 null -> Object -> Function -> fn: fn.__proto ...

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

    构造函数创建对象 我们先使用构造函数创建一个对象: function Person(){} var person = new Person(); person.name = 'Kevin'; cons ...

  5. JavaScript深入系列(一)--原型和原型链详解

    构造函数创建对象 首先我们先使用构造函数创建一个对象: function Person(){} var person = new Person(); person.name = 'tom'; cons ...

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

    1 .构造函数创建对象 我们先使用构造函数创建一个对象: function Person(){ } var p = new Person(); p.name = 'ccy'; console.log( ...

  7. (转)JavaScript深入之从原型到原型链

    构造函数创建对象 我们先使用构造函数创建一个对象: function Person() { } var person = new Person(); person.name = 'Kevin'; co ...

  8. JS基础-该如何理解原型、原型链?

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

  9. JavaScript深入之从原型到原型链(转载)

    构造函数创建对象 我们先使用构造函数创建一个对象: function Person() { } var person = new Person(); person.name = 'Kevin'; co ...

  10. 原型,原型链,给予原型和class的继承

    学习react的时候遇到了class方式的继承语法,原理和代码的解释很详细,值得一读. 原型每个函数(构造函数)都有一个 prototype 属性,指向该函数(构造函数)的原型对象.实例没有 prot ...

随机推荐

  1. JavaScriptSerializer 序列号datatime时少了8小时

    有人说主要的因素是在于JSON格式不直接支持日期和时间. 简单一点处理办法是ToLocalTime()一下:dt = dt.ToLocalTime(); 参考http://blog.csdn.net/ ...

  2. iOS开发-多台机器共用证书问题

    今天又被证书的问题卡壳了: 在公司的电脑上申请的开发.发布证书,回家用自己的电脑从苹果开发者中心上将证书和配置文件都下载下来提示用不了,弄了很久才想起.p12文件,必须从申请证书的电脑上导出,导入到自 ...

  3. 【Codevs 1376】帕秋莉•诺蕾姬

    http://codevs.cn/problem/1376/ 枚举修改哪两位,将sum减去之前位置的数+交换之后  %m==0即可 预处理26的次方+O(n^2) // <1376.cpp> ...

  4. 蓝书2.4 AC自动机

    T1 玄武密码 bzoj 4327 题目大意: 一些字符串 求这些字符串的前缀在母串上的最大匹配长度是多少 思路: 对于所有串建立AC自动机 拿母串在自动机上匹配 对所有点打标记 以及对他们的fail ...

  5. Gamma的完全理解

    Gamma校正 问题:什么是Gamma曲线矫正?Gamma曲线矫正是什么意思?       Gamma曲线是一种特殊的色调曲线,当Gamma值等于1的时候,曲线为与坐标轴成45°的直线,这个时候表示输 ...

  6. uva11542

    https://vjudge.net/problem/UVA-11542 xor高斯消元... 答案为2^f-1 其实书上有一个问题 样例有3种情况,其中4,6,15是绑在一起的,也就是他们必须满足一 ...

  7. 什么是需求Bug、设计Bug、功能bug?

    首先什么是需求Bug.设计Bug.功能bug? 需求Bug,指由于客户需求描述不清晰或错误.需求收集人员自身原因及需求本身模糊难于分析.获取等原因,导致客户需求获取不准确,后期产品不能满足客户.用户的 ...

  8. 用React & Webpack构建前端新闻网页

    这是一篇给初学者的教程, 在这篇教程中我们将通过构建一个 Hacker News 的前端页面来学习 React 与 Webpack. 它不会覆盖所有的技术细节, 因此它不会使一个初学者变成大师, 但希 ...

  9. Python Matplotlib模块--pylab

    #-*- coding: utf-8 -*- ''' subplot(m,n,p):其中,m表示是图排成m行,n表示图排成n列,也就是整个figure中有n个图是排成一行的,一共m行,如果m=2就是表 ...

  10. springAOP配置XML方式配置切面报错error at ::0 formal unbound in pointcut

    [错误配置文件] <aop:config> <aop:pointcut expression="execution(* net.fifteenho.service.impl ...