上一篇随笔主要讲了变量提升的问题,今天我们来讲讲很多前端er在初期很长一段时间内都没有完全搞明白的原型链和构造函数。

1,什么是构造函数

  那么要讲到构造函数,必须要有一个函数,所以我们建立一个函数

    

function Person(){}

 ok,既然是构造函数,那么久要有参数和返回值 

Person = function(name,age,force){
          this.name = name;
this.age = age;
this.force = force;
}

 一个函数就出来了,接下来我们来看一下这个Person的__proto__和prototype

Person.prototype    //Object {constructor:function(name,age,force),__proto__:Object}
Person.__proto__ //function(){}

  好的,我们的构造函数完成了,现在我们来通过构造函数创建一个对象

var mike = new Person('mike',23,'strong');
mike //Person {name: "mike", age: 23, force: "strong"}
mike.prototpe //undefined
mike.__proto__ //Object {constructor:function(name,age,force),__proto__:Object}

  在上面2段代码,我们可以发现很多,仔细观看mike.__proto__和Person.prototype,是不是发现,这两者其实是一个东西,我们待会验证一下,并且发现mike.prototype是undefined

alert(mike.__proto__ === Person.prototype)    //true

  这样我们大概就了解了,构造函数new Person()发生时候的一个过程

  创建mike对象;

  mike.__proto__ = Person.prototype;  

  Person.call(mike,'mike',23,'strong');

2,__proto__和prototype

  __proto__按照定义来讲,是对象自带的一个属性,这个__proto__它本身又是一个对象,__proto__的属性,可以被mike读取到,但不会显示在mike对象里,当然__proto__对象中的属性读取优先级要低于mike本身

  而prototype呢,则是函数的一个自带属性,其中prototype又有两个元素,1,constructor指向函数本身,2,__proto__同对象中的__proto__

  构造函数在创建对象是最大的特点就是会把自身的prototype按值传递给被构造对象的__proto__,因为prototype可以当做对象来看,所以是按引用传递//纠正上次的一个错误

  暂时我知道的prototype的作用,就是在构造对象时,将自身的prototype(引用)传递给新函数的__proto__

3,原型链

  这里我可以举个例子

 mike    //Person {name: "mike", age: 23, force: "strong"};
mike.__proto__face = 'handsome';
mike //Person {name: "mike", age: 23, force: "strong"}
mike.face //'handsome'

  mike对象中没有face属性,所以往mike.__proto__中找face,找到了,显示出来,找不到的话,往mike.__proto__.__proto__中找face,如此往复,直到某一个__proto__返回null

4,多次继承

  

function One(){
this.sayOne = function(){
alert('nameOne');
}
}
function Two(){};
Two.prototype = new One();
Two.prototype.sayTwo = function(){
alert('nameTwo');
}
var say = new Two();
say.sayOne() //‘nameOne’
say.sayTwo() //‘nameTwo’
two.prototype  //one(sayOne:function(){},sayTwo:function(){})

  

  原理很简单 Two.prototype = new One(); 这一步得到 Two.prototype.__proto__ = One.prototype;

  say.__proto__ = Two.prototype;

  所以say.__proto__.__proto__ = One.prototype;

  所以say.sayTwo = say.__proto__.sayTwo = Two.prototype.sayTwo ;

    One.call(Two.prototype);

    say.sayOne = say.__proto__.sayTwo = Two.prototype.sayOne;

  要完成多次继承,只要将上一层的属性实例化到下一层的prototype即可,因为prototype是可以作为对象的__proto__直接使用的!

面试中常用的__proto__,prototype和原型链,你都了解了吗?的更多相关文章

  1. 原型prototype、原型链__proto__、构造器constructor

    创建函数时,会有原型prototype,有原型链__proto__,有constructor.(构造函数除外,没有原型) . prototype原型:是对象的一个属性(也是对象),使你有能力向对象添加 ...

  2. [js高手之路]一步步图解javascript的原型(prototype)对象,原型链

    我们接着上文继续,我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉. function CreateObj(uName) { this ...

  3. [js高手之路]原型对象(prototype)与原型链相关属性与方法详解

    一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...

  4. 为什么Object.prototype在Function的原型链上与Function.prototype在Object的原型链上都为true

    关于javascript的原型链有一个问题我一直很疑惑:为什么 Function instanceof Object 与 Object instanceof Function都为true呢? Func ...

  5. 原型prototype与原型链__proto__

    在 javascript 中我们会约定俗成,如果一个方法是被 new 出来使用的,那么该方法名首字母通常会大写,例如下面代码块中的 Person. var Person = function(name ...

  6. 面试中常用排序算法的python实现和性能分析

    这篇是关于排序的,把常见的排序算法和面试中经常提到的一些问题整理了一下.这里面大概有3个需要提到的问题: 虽然专业是数学,但是自己还是比较讨厌繁琐的公式,所以基本上文章所有的逻辑,我都尽可能的用大白话 ...

  7. 全面了解 Javascript Prototype Chain 原型链

    原型链可以说是Javascript的核心特征之一,当然也是难点之一.学过其它面向对象的编程语言后再学习Javascript多少会感到有些迷惑.虽然Javascript也可以说是面向对象的语言,但是其实 ...

  8. prototype与原型链

    1.今天翻看 阮一峰老师的博客看到了,一篇讲javascript为什么要设计出prototype,跳转      大意就是new 的方式有缺陷,没有共同的属性,一下明白了很多. 在来一张原型链的图:

  9. 面试中常问的List去重问题,你都答对了吗?

    面试中经常被问到的list如何去重,用来考察你对list数据结构,以及相关方法的掌握,体现你的java基础学的是否牢固. 我们大家都知道,set集合的特点就是没有重复的元素.如果集合中的数据类型是基本 ...

随机推荐

  1. MVC模式

                             1.MVC的概念 1.1什么是MVC? MVC是一种架构型模式,它本身不引入新的功能,只是指导我们把web应用结构做的更加合理,实现逻辑与页面相分离. ...

  2. MySQL乱码问题

      JSP的request 默认为ISO8859_1,所以在处理中文的时候, 要显示中文的话,必须转成GBK的,如下 String str=new String(request.getParamete ...

  3. [译]Dynamics AX 2012 R2 BI系列-Cube概览

    https://msdn.microsoft.com/EN-US/library/dd252604.aspx     Cube是一个多维度的结构,它是BI应用开发的基础.本文描述了cube的组成部分, ...

  4. java 创建string对象机制 字符串缓冲池 字符串拼接机制

    对于创建String对象的机制,在这一过程中涉及的东西还是值得探究一番的. 首先看通过new String对象和直接赋值的方式有什么区别,看如下代码: public static void main( ...

  5. 《Spark 官方文档》机器学习库(MLlib)指南

    spark-2.0.2 机器学习库(MLlib)指南 MLlib是Spark的机器学习(ML)库.旨在简化机器学习的工程实践工作,并方便扩展到更大规模.MLlib由一些通用的学习算法和工具组成,包括分 ...

  6. C#Abstract抽象类的语法

    1. 抽象方法只能放在抽象类中,且不用实现(没有方法体); 2.抽象类中可以放非抽象方法; 3.抽象类不能实例化,只能实例化他的子类,是为子类"活着";

  7. MOCK DATA -- node路由

    前后端分离,有时候后端接口给的不是很及时,这就需要前端自己mock data, 本文讲的简单的node模拟数据 api路由跳转 首先有个data.js(json)文件, 路由: 配置在dev-serv ...

  8. PHP三元运算符 isset($_GET['id']) ? $_GET['id'] : ”

    $id = isset($_GET['id']) ? $_GET['id'] : ''; ?> 这是一个php的三元运算符 (条件) ? (值1):(值2); 解释:如果条件成立(为真),则执行 ...

  9. Java发送socket请求的工具

    package com.tech.jin.util; import java.io.ByteArrayOutputStream; import java.io.IOException; import ...

  10. 使用FIR.im发布自己的移动端APP

    一次很偶然的机会知道FIR.im,这家公司主要的产品就是帮助开发者方便便捷地发布iOS或者Android应用的.今天我就聊聊如何在FIR.im中发布自己的APP,然后让加入UUID的设备通过网页直接下 ...