js函数prototype属性学习(二)
继续探讨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属性学习(二)的更多相关文章
- js函数prototype属性学习(一)
W3school上针对prototype属性是这么给出定义和用法的:使您有能力向对象添加属性和方法.再看w3school上给的那个实例,如下图: 仔细一看,原来最基本的作用就是对某些对象的属性.方法来 ...
- 简单理解js的prototype属性
在进入正文之前,我得先说说我认识js的prototype这个东西的曲折过程. 百度js的prototype的文章,先看看,W3School关于prototype的介绍: 你觉得这概念适合定义js的pr ...
- js函数的属性和方法
js函数的属性和方法 前面的话 函数是javascript中特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本文是深入理解j ...
- 复习一下js的prototype 属性
<html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</t ...
- js中Prototype属性解释及常用方法
1.prototype的定义 javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用. 每一个构造函数都有一个属 ...
- js的Prototype属性 解释及常用方法
函数:原型 每一个构造函数都有一个属性叫做原型(prototype,下面都不再翻译,使用其原文).这个属性非常有用:为一个特定类声明通用的变量或者函数. prototype的定义 你不需要显式地声明一 ...
- JS函数的属性
1.arguments.callee //经典的阶乘(递归)函数 function factorial(num) { if (num <= 1) { return 1; } else { ret ...
- JS的Prototype属性
转载至: http://blog.sina.com.cn/s/blog_7045cb9e0100rtoh.html 函数:原型 每一个构造函数都有一个属性叫做原型(prototype,下面都不再翻译, ...
- vue.js的计算机属性学习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- (2).mybatis单元测试(junit测试)
一.Junit使用步骤:1.创建测试目录,(src.测试目录是test)2.在测试目录test中创建与src中相同的包名3.为需要测试的类创建测试类,例如:UsersMapper,测试类是UsersM ...
- Python学习之字符串中的下标和切片以及逆序
python中的下标从0开始 从后往前取 注意:后面的2代表步长,先看2:-1取出来的数值 [起始位置:终止位置:步长] 逆序 但是发现如果[-1:0:-1]发现是取不到第一个元素的,那么怎么办? 此 ...
- 【FPGA篇章六】FPGA编译向导:详解编译预处理功能
欢迎大家关注我的微信公众账号,支持程序媛写出更多优秀的文章 Verilog HDL语言和C语言一样也提供了编译预处理功能. Verilog HDL允许在程序中使用特殊的编译预处理语句. 在编译时,通常 ...
- vue-cli3.0读取外部化配置文件来修改公共路径
之前我写过一篇通过nginx配置代理转发的博客,正常来说也是正确的,但不足之处在了甲方还用了F5负载均衡和gateway来代理转发.所以之前我认为的请求->nginx转发代理->后端服务, ...
- Linux文件系统基本结构
(1)Linux文件系统为一个倒转的单根树状结构: (2)文件系统的根为“/”: (3)文件系统严格区分大小写: (4)路径使用“/”分割(windows使用“\”): 当前工作目录 (1)每个she ...
- 杂记---主要关于PHP导出excel表格学习
今天上午处理了一下WIN7系统的电脑前置话筒和耳机口无法使用的问题,主要现象是耳机插入后没声音,麦插入话筒说话对方也听不到,后置端口一切正常.刚开始判断肯定是设置的问题,于是用另一台电脑百度搜索“wi ...
- 数据库-第八章 数据库编程-8.1 嵌入式SQL
嵌入式SQL 一.嵌入式SQL的处理过程 1.嵌入式SQL语句的基本格式 2.嵌入式SQL的处理过程 3.主语言访问数据库的基本步骤 ⅰ建立数据库连接 ⅱ定义必要的主变量和数据通信区 ⅲ访问数据库并返 ...
- HDU 2009 (水)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2009 题目大意:数列的第一项为n,以后各项为前一项的平方根,求数列的前m项的和 解题思路: 用好sqr ...
- @vue/cli 4.0+express 前后端分离实践
之前总结过一篇vue-cli 2.x+express+json-server实现前后端分离的帖子,@vue/cli3.0及4.0搭建的项目与vue-cli2.x的项目结构有很大的不同.这里对@vue/ ...
- vue钩子
全局钩子 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 钩子是异 ...