var Person = function (name) {

        this.name = name;
} Person.prototype.say = function () { console.log(this.name);
} var p = new Person('hello'); p.say(); // 'hello'

这是一个最简单的面向对象的写法,那为什么通过  new 方法后赋值给  p  后   ,p可以调用say()方法!

我们来看看  new  为我们做了些什么

    1.var p = {};
2.p.__proto__ = Person.prototype;
3.Person.call(p);    步骤1:初始化一个空对象
   步骤2:将这个对象的 __proto__ 指向 Person.prototype
   步骤3:初始化p

__proto__是什么鬼?

每一个对象的内部都会有一个__proto__属性,当我们想要查找某个对象的某个属性时,如果没有,他就会去__proto__属性里面去找,如果还是没找到,而__proto__属性里面又包含一个__proto__,就又去__proto__的__proto__里面去找.........,一直找到Object里面,如果还没有,就真的没有了!!

你可能有点晕,但是这就是js中的原型链机制,而这个__proto__就是这个链子。

这是  console.log(p)  产生的结果!

位置1:   p.__proto__  指向了一个对象,而这个对象就是  Person.prototype

位置2:这个__proto__是属于Person.prototype的,他指向Object.prototype

    console.log(p.__proto__ == Person.prototype);  // true

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

现在我们可以解释为啥p可以调用say()方法,p自己没有say()方法,但是因为它的__proto__属性指向了Person.prototype

恰巧 Person.prototype有say()方法,那要是Person.prototype里面还是没有呢?,那就去Person.prototype.__proto__

指向的Object.prototype里面去找,要是还是没有,那就真的没有了

 

这是一张脑图!非常形象的描述了js原型继承的机制

我们可以把上面的Cat    mycat   换成我们的   Person   p

    console.log(p.__proto__ == Person.prototype);//true

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

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

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

    console.log({}.__proto__ == Object.prototype);  //true

__proto__                     __proto__                 __proto__

A——————————》B——————————》C——————————》Object.prototype

所有对象最终都指向Object.prototype

A里面有就用A里面的,不会再去找了,如果没有就通过原型链去连接的B里面找,如果有就用B里面的,如果没有就去B连接的C里面去找,

如果C有,就用C的,如果没有就去Object.prototype找,如果还是没有,就真的没有了!!!

js面向对象-原型链的更多相关文章

  1. 怎么理解js的原型链继承?

    前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js ...

  2. 前端基本知识(二):JS的原型链的理解

    之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这 ...

  3. js javascript 原型链详解

    看了许多大神的博文,才少许明白了js 中原型链的概念,下面给大家浅谈一下,顺便也是为了巩固自己 首先看原型链之前先来了解一下new关键字的作用,在许多高级语言中,new是必不可少的关键字,其作用是为了 ...

  4. JS中原型链中的prototype与_proto_的个人理解与详细总结(**************************************************************)

    一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...

  5. 自己对js对原型链的理解

    js对象分为2种 函数对象和普通对象 函数对象 比如 function Show(){}var x=function Show2(){}var b=new Function("show3&q ...

  6. JS中原型链继承

    当我们通过构造函数A来实现一项功能的时候,而构造函数B中需要用到构造函数A中的属性或者方法,如果我们对B中的属性或者方法进行重写就会出现冗杂的代码,同时写出来也很是麻烦.而在js中每个函数都有个原型, ...

  7. JavaScript 随笔2 面向对象 原型链 继承

    第六章 面向对象的程序设计 1.创建对象的几种方式 A)工厂模式 function CreatObj(name,sex,age){ this.name=name; this.sex=sex; this ...

  8. js的原型链和constructor

    转载:http://www.108js.com/article/article1/10201.html?id=1092 请先瞻仰上边的这篇文章. 对象的原型链: box.__proto__.__pro ...

  9. js的原型链

    js中的原型链是一个很重要的概念,理解了原型链,对js程序的开发有很大的好处,废话不说,先上图: javascript是基于原型的语言,所以一个对象可以另一个对象继承.不过javascript实现的时 ...

随机推荐

  1. 【.net 深呼吸】项目中是否有必要删去多余的引用

    很多大伙伴们常常会苦思一个问题:项目代码中用不到的引用,是不是应该删除,以避免代码在编译后存在太多的无意义引用? 其实,这个问题,你完全可以自己去应证的,咋应证呢?知道反射吗,对了,只要你知道这玩意儿 ...

  2. iOS Storyboard适配问题

      通用的Storyboard 通用的stroyboard文件是通向自适应布局光明大道的第一步.在一个storyboard文件中适配iPad和iPhone的布局在iOS8中已不再是梦想.我们不必再为不 ...

  3. html5表单和伪类

    type = "email"; 自带验证格式type = "url"; 网址 http//:type = "tel";移动端会变成数字键盘t ...

  4. Spring BeanFactory实例化Bean的详细过程

    Spring中Bean的实例化是Bean生命周期的一个重要环节,通常Bean初始化后将不再改变. 那么Spring实例Bean的过程到底是怎么样的呢?!   要想获取到一个bean对象,得先通过Bea ...

  5. 什么是DOCTYPE?

    一.DOCTYPE是什么? DOCTYPE是文档类型的速记(文档.网页中指定页面的XHTML或HTML版本类型).使符合标准的页面,一个关键组成部分是DOCTYPE声明.只有确定了正确的XHTML D ...

  6. 利用hexo+github+nodejs搭建自我博客的一天

    放一张比较喜欢的背景图镇楼,伪文艺一波.因为刚刚抱着四个快递从公司大门走到宿舍,快递都比我高,坐电梯的时候电梯里面的灯一闪一闪,电梯还摇晃,上演了一波鬼吹灯,惊魂未定... 说正题:我喜欢的博客应该是 ...

  7. linux下php开发环境搭建(nginx+php+mysql)

    安装前准备工作 先安装一些必要的类库 yum install -y wget  zlib-devel bzip2-devel  curl-devel openssl openssl-devel vim ...

  8. BZOJ 4089:[Sdoi2015]graft(SDOI 2015 Round 2 Day 2)

    别人家的神选系列,我只会做这道题QAQ 题目描述: 给定一颗树,加上k条边,将n个点染色,相邻两点不同,记颜色为i的又ti个,求$$\frac{\sum_{i=1}^{n} \frac{ti}{i}} ...

  9. BZOJ 1606: [Usaco2008 Dec]Hay For Sale 购买干草(动态规划)

    裸的背包= =,没什么好说的= = CODE: #include<cstdio>#include<iostream>#include<algorithm>#incl ...

  10. MySql Sql 优化技巧分享

    有天发现一个带inner join的sql 执行速度虽然不是很慢(0.1-0.2),但是没有达到理想速度.两个表关联,且关联的字段都是主键,查询的字段是唯一索引. sql如下: SELECT p_it ...