继续探讨js对象的prototype属性,前面已经看到在创建完一个对象之后,随时都会有一个_proto_属性伴随所有,那么,这个_proto_又是用来干嘛的,面试时问的高大上的原型链又是怎么回事?

拿出前面已经有的例子,如下:

function Person(name){

  this.name = name;

  this.interduceSelf= function(){

    alert("my name is " + this.name);

  };

};

Person.prototype.interduceSelfChinses = function(){

  alert("我的名字是 " + this.name);

};

从这个例子可以看出,通过给person.prototype设置了一个函数对象的新方法,那有person实例(例中:person1)出来的普通对象就继承了这个新方法。接着看了下这两个东西:person1.__proto__和Person.prototype,截图如下:

二者压根就是同一个东西嘛,同时,我试验了person1.__proto__ == Person.prototype,结果为true,因此,我大胆推测构造函数new Person()发生时候的一个过程,

创建person1对象;

  person1.__proto__ = Person.prototype;  

  Person.call('xiaoming');

同样,person.prototype对象也有__proto__属性,它指向创建它的函数对象(Object)的prototype;

person.prototype.__proto__ === Object.prototype //结果也还是 true

继续,Object.prototype对象也有__proto__属性,但它比较特殊,为null;

Object.prototype.__proto__; //结果为null

我们把这个由__proto__串起来的直到Object.prototype.__proto__为null的链叫做原型链,如下图:

__proto__按照定义来讲,是对象自带的一个属性,这个__proto__它本身又是一个对象,__proto__的属性,可以被person1读取到,但不会显示在person1对象里(是一个看起来对外隐身的属性),当然__proto__对象中的属性读取优先级要低于person1本身(一般视作隐秘属性,可以拿来用,但不必单独指定它)

  而prototype呢,则是函数的一个自带属性,其中prototype又有两个元素,constructor和__proto__,

    1、constructor指向函数本身;即

      Person.prototype.constructor === Person  //结果是true
        Function.prototype.constructor === Function  //结果是true
        Object.prototype.constructor === Object  //结果是true

    2、__proto__指向的是创建它的那个对象的prototype,即

      person1.__proto__ == Person.prototype  //结果是true

  构造函数在创建对象是最大的特点就是会把自身的prototype按值传递给被构造对象的__proto__,那么,在上面那段代码中,执行new Person()时,一下子指定了好几个对象的prototype和__proto__,请看如下的结构图:

由此可以做出如下总结:

1.原型和原型链是JS实现继承的一种模型,对对的,这么多看起来毫不相干的对象,通过原型、原型链,竟然给连成了亲家;

2.原型链的形成是真正是靠__proto__ 而非prototype,这点也毋庸置疑,从上面可以看出,整个链关系里,prototype充当的角色是连接点,而真正起绳索连接作用的却是__proto__。

看一个例子:

function code(){};

function javascript(){};

code.languageType = "interpreted language";
javascript.prototype = code;
var jquery = new javascript();

console.log(javascript.languageType) //结果是 undefined
console.log(jquery.languageType) // 结果是 interpreted language

不了解这个原型和原型链,还真有点丈二和尚摸不着头脑,现在来探讨一下:

javascript函数对象虽然指定了prototype属性是code,但它的__proto__内置属性却没有指定是谁,同时,原型链跟prototype属性八竿子打不着,而是依赖__proto__去查找,当然查找不到任何东西,因此,这里找不到languageType这个属性值;

jquery函数对象就不一样了,它在创建伊始就默认的指定了它的__proto__内置属性即为javascript.prototype,也即是code,code对象的languageType属性是有值的,也即是interpreted language,因此就读取到了属性值。

js函数prototype属性学习(二)的更多相关文章

  1. js函数prototype属性学习(一)

    W3school上针对prototype属性是这么给出定义和用法的:使您有能力向对象添加属性和方法.再看w3school上给的那个实例,如下图: 仔细一看,原来最基本的作用就是对某些对象的属性.方法来 ...

  2. 简单理解js的prototype属性

    在进入正文之前,我得先说说我认识js的prototype这个东西的曲折过程. 百度js的prototype的文章,先看看,W3School关于prototype的介绍: 你觉得这概念适合定义js的pr ...

  3. js函数的属性和方法

    js函数的属性和方法 前面的话 函数是javascript中特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本文是深入理解j ...

  4. 复习一下js的prototype 属性

    <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</t ...

  5. js中Prototype属性解释及常用方法

    1.prototype的定义 javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用. 每一个构造函数都有一个属 ...

  6. js的Prototype属性 解释及常用方法

    函数:原型 每一个构造函数都有一个属性叫做原型(prototype,下面都不再翻译,使用其原文).这个属性非常有用:为一个特定类声明通用的变量或者函数. prototype的定义 你不需要显式地声明一 ...

  7. JS函数的属性

    1.arguments.callee //经典的阶乘(递归)函数 function factorial(num) { if (num <= 1) { return 1; } else { ret ...

  8. JS的Prototype属性

    转载至: http://blog.sina.com.cn/s/blog_7045cb9e0100rtoh.html 函数:原型 每一个构造函数都有一个属性叫做原型(prototype,下面都不再翻译, ...

  9. vue.js的计算机属性学习

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. 设计模式(Java语言)- 建造者模式

    前言 在日常的生活中,我们可以经常看到建造者模式的影子.比如,建造房子,那么房子就是一个产品,房子由门,窗,墙,地板等部门组成.然后包工头在建造房子的时候就根据设计好的图纸来建造,但是包工头并不是亲自 ...

  2. LeetCode 刷题1---两数之和

    /** 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中 ...

  3. QtCreator中使用链接库

    说明 之前讨论的DLL的静态链接和动态连接都是基于 MSVC 编译器,但是 MinGW 似乎有另外一套类似但是不相同的机制.下文均在 windows 下使用 Qt Creator 中使用 MinGW ...

  4. 架构设计 | 分布式系统调度,Zookeeper集群化管理

    本文源码:GitHub·点这里 || GitEE·点这里 一.框架简介 1.基础简介 Zookeeper基于观察者模式设计的组件,主要应用于分布式系统架构中的,统一命名服务.统一配置管理.统一集群管理 ...

  5. 【Hadoop离线基础总结】MapReduce 社交粉丝数据分析 求出哪些人两两之间有共同好友,及他俩的共同好友都有谁?

    MapReduce 社交粉丝数据分析 求出哪些人两两之间有共同好友,及他俩的共同好友都有谁? 用户及好友数据 A:B,C,D,F,E,O B:A,C,E,K C:F,A,D,I D:A,E,F,L E ...

  6. Java三大特征:封装 继承 多态

    内部类:成员内部类.静态内部类.方法内部类.匿名内部类. 内部类:定义在另外一个类里面的类,与之对应,包含内部类的外部类被称为外部类. 内部类的作用:(1)内部类提供了更好的封装,可以把内部类隐藏在外 ...

  7. aop面向切面编程的实现

    aop主要用于日志记录,跟踪,优化和监控 下面是来自慕课网学习的一些案例,复制黏贴就完事了,注意类和方法的位置 pom添加依赖: <dependency> <groupId>o ...

  8. React:List and key

    在React中,可以通过数组方法返回一组 组件元素,并将该数组作为render()的js插值. function NumberList(props) { const numbers = props.n ...

  9. ambari hdp ssh链接错误

    错误信息: ERROR 2019-09-05 10:29:05,700 NetUtil.py:96 - EOF occurred in violation of protocol (_ssl.c:57 ...

  10. 安装的SQL Server2008 R2版的连接不到本地数据,提示未找到或无法访问服务器。----复制自百度知道

    安装的SQL Server2008 R2版的连接不到本地数据,提示未找到或无法访问服务器.使用Windows身份验证 2012-09-17 00:23hj168926 | 分类:数据库DB | 浏览3 ...