一,函数对象

所有引用类型(函数,数组,对象)都拥有__proto__属性(隐式原型)

所有函数拥有prototype属性(显式原型)(仅限函数)

原型对象:拥有prototype属性的对象,在定义函数时就被创建

二,构造函数

先复习下构造函数

     //创建构造函数
function Word(words){
this.words = words;
}
Word.prototype = {
alert(){
alert(this.words);
}
} //创建实例
var w = new Word("hello world");
w.print = function(){
console.log(this.words);
console.log(this); //Person对象
}
w.print(); //hello world
w.alert(); //hello world

print()方法是w实例本身具有的方法,所以w.print()打印hello world;alert()不属于w实例的方法,属于构造函数的方法,w.alert()也会打印hello world,因为实例继承构造函数的方法。

实例w的隐式原型指向它构造函数的显式原型,指向的意思是恒等于

w.__proto__ === Word.prototype

当调用某种方法或查找某种属性时,首先会在自身调用和查找,如果自身并没有该属性或方法,则会去它的__proto__属性中调用查找,也就是它构造函数的prototype中调用查找。所以很好理解实例继承构造函数的方法和属性:

w本身没有alert()方法,所以会去Word()的显式原型中调用alert(),即实例继承构造函数的方法。

三,原型和原型链

        Function.prototype.a = "a";
Object.prototype.b = "b";
function Person(){}
console.log(Person); //function Person()
let p = new Person();
console.log(p); //Person {} 对象
console.log(p.a); //undefined
console.log(p.b); //b

想一想p.a打印结果为undefined,p.b结果为b

解析:

  p是Person()的实例,是一个Person对象,它拥有一个属性值__proto__,并且__proto__是一个对象,包含两个属性值constructor和__proto__

      console.log(p.__proto__.constructor);   //function Person(){}

      console.log(p.__proto__.__proto__);     //对象{},拥有很多属性值

  我们会发现p.__proto__.constructor返回的结果为构造函数本身,p.__proto__.__proto__有很多参数

我们调用constructor属性,p.___proto__.__proto__.constructor得到拥有多个参数的Object()函数,Person.prototype的隐式原型的constructor指向Object(),即Person.prototype.__proto__.constructor == Object()

  从p.__proto__.constructor返回的结果为构造函数本身得到Person.prototype.constructor == Person()所以p.___proto__.__proto__== Object.prototype

  所以p.b打印结果为b,p没有b属性,会一直通过__proto__向上查找,最后当查找到Object.prototype时找到,最后打印出b,向上查找过程中,得到的是Object.prototype,而不是Function.prototype,找不到a属性,所以结果为undefined,这就是原型链,通过__proto__向上进行查找,最终到null结束

console.log(p.__proto__.__proto__.__proto__);   //null

console.log(Object.prototype.__proto__);        //null

大家理解刚才的过程,相信下面这些应该也都明白

//Function

function Function(){}

console.log(Function);  //Function()

console.log(Function.prototype.constructor);    //Function()

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

console.log(Function.prototype.__proto__.__proto__);    //NULL

console.log(Function.prototype.__proto__.constructor);  //Object()

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

  总结:

1.查找属性,如果本身没有,则会去__proto__中查找,也就是构造函数的显式原型中查找,如果构造函数中也没有该属性,因为构造函数也是对象,也有__proto__,那么会去它的显式原型中查找,一直到null,如果没有则返回undefined

2.p.__proto__.constructor  == function Person(){}

3.p.___proto__.__proto__== Object.prototype

4.p.___proto__.__proto__.__proto__== Object.prototype.__proto__ == null

5.通过__proto__形成原型链而非protrotype

最后附上一张图,大家阅读完之后,看图应该可以很容易理解

javascript:原型与原型链的更多相关文章

  1. JavaScript继承与原型链

    对于那些熟悉基于类的面向对象语言(Java 或者 C++)的开发者来说,JavaScript 的语法是比较怪异的,这是由于 JavaScript 是一门动态语言,而且它没有类的概念( ES6 新增了c ...

  2. 【javascript基础】4、原型与原型链

    前言 荒废了好几天,在宿舍闷了几天了,一直想着回家放松,什么也没搞,论文就让老师催吧.不过,闲的没事干的感觉真是不好,还是看看书,写写博客吧,今天和大家说说函数的原型. 原型是什么 第一次看到这个的时 ...

  3. 【JavaScript】深入理解JavaScript之强大的原型和原型链

    由于JavaScript是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. AD: hasOwnProperty函数: hasOw ...

  4. Javascript 原型和原型链

    先来了解一下Javascript中的原型:”原型也是一个对象,原型可以用来实现继承...“ 对于 原型,构造函数,以及实例之间的关系:“每个(构造)函数都有一个原型属性,原型对象都包含一个指向构造函数 ...

  5. javascript 原型 和 原型链

    最近几天,好些新同事来问原型,原型链啥的.本身作为菜鸟的我好像也没有好好整理过这个,这里写写自己的理解. 原型 大家都知道,JavaScript 不包含传统的类继承模型,而是使用 prototype ...

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

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

  7. javascript 之原型、原型链-14

    原型 原型是一个对象,每个函数对象(在javascript 之对象中说过函数也是对象 )都有一个属性(prototype)指向这个对象--原型对象,这个对象的作用是让所有对象实例共享原型对象中的属性. ...

  8. JavaScript原型与原型链

    一.数据类型 JavaScript的数据类型可以分为基本数据类型和引用数据类型. 基本数据类型(6种) String Number Boolean null undefined Symbol(ES6) ...

  9. JavaScript prototype原型和原型链详解

    用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...

  10. 对Javascript 类、原型链、继承的理解

    一.序言   和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承 ...

随机推荐

  1. Linux - 更改软件源

    镜像源 网易镜像源 在网易开源镜像页面,点击对应镜像名的使用帮助,可以查看到更新源的方法,按步骤操作即可. 阿里云镜像源 在阿里云开源镜像页面,点击对应Mirror分类的help标签,可以查看到更新源 ...

  2. docker 下安装mssql-server-linux

    docker search mssql 查找mssql镜像 docker pull microsoft/mssql-server-linux 拉去mssql镜像 docker images 查看镜像 ...

  3. php5.3新垃圾回收机制详解

    php的垃圾回收机制主要参考了http://blog.csdn.net/phpkernel/article/details/5734743 这文章. 变量对应的值,比如 $a="abc&qu ...

  4. POJ 2421

    #include<iostream> #include<stdio.h> #define MAXN 500 #define inf 100000000 using namesp ...

  5. redis常用命令(一)

    一.redis常见的数据操作命令 http://redisdoc.com/ 二.键(key) keys *: 查询所有的key. exists key:判断某个key是否存在. move key db ...

  6. vue教程2-02 vue防止花括号{{}}闪烁,v-text和v-html、v-cloak

    vue教程2-02 vue防止花括号{{}}闪烁,v-text和v-html.v-cloak 一.v-text和v-html <span>{{msg}}</span>  --& ...

  7. print默认在末尾添加一个换行符,但其实也可以不用!

    白月黑羽今天给大家分享另外一个冷知识:) python中 print函数打印信息时默认添加一个换行符,所以你看到一条print语句,则单独占一行,那是否可以不要换行符呢? 答案是肯定的,当然可以,可用 ...

  8. Makefile中.PHONY的作用

    单词phony (即phoney)的意思是:伪造的,假的.来自collins的解释是: If you describe something as phoney, you disapprove of i ...

  9. SpringMVC之类型转换

    在数据绑定上,SpringMVC提供了到各种基本类型的转换,由前端到后台时,SpringMVC将字符串参数自动转换为各种基本类型.而对于其他,则需要自己编写代码进行转换.本随笔以转换时间类型为例,使用 ...

  10. linux wheel组

    wheel 组的概念 wheel 组的概念继承自 UNIX.当服务器需要进行一些日常系统管理员无法执行的高级维护时,往往就要用到 root 权限:而“wheel” 组就是一个包含这些特殊权限的用户池: ...