javascript是基于原型的一门脚本语言,那究竟原型是什么?

本文将从以下几个方面重点阐述原型

  1. 构造函数是什么?
  2. 构造函数和我们常见的Array String有什么关系?
  3. 原型的使用?
  4. __proto__是什么?
  5. constructor是什么?
  6. 什么是原形链?

一:请看下面一段代码

//声明一个构造函数 函数名首字母一般大写
function Fn() { } Fn.prototype.a = function() {
alert(1);
}
//得到实例化对象
var f1 = new Fn();
//调用构造函数的原型方法
f1.a();

上面这段代码执行后结果会弹出1,可能有小伙伴看不懂我为什么要在这里讲构造函数了。暂且不急,再看看下面这段代码。

数组的使用

var arr = [1,2,3];
arr.push(4);

如果细心的小伙伴可能看出来上面的代码和这两行代码有点像。不过肯定有些人觉得不像,那我继续转换一下。

var arr = new Array(1,2,3);
arr.push(4);

数组也是构造函数?

瞬间感觉到很熟悉 有木有,Array也是一个构造函数吗?

下面我们来实践一下就知道了

`alert(typeof Array) //function`

原来javascript内置的这些方法也是用构造函数的方法实现的。

比如Array.push 就是通过

Array.prototype.push = function(){//代码实现}

那是不是也意味着我们可以直接篡改这些原生方法?

答案是肯定,在这里我就证明了。不过我不建议这样干,因为会造成代码混乱。

我们只要通过new 一个函数,就可以实例化得到这个对象,可以直接在这个构造函数上面添加原型方法,实例化的对象就直接能使用这个对象了。

下面再让大家看一张图和一段代码深入了解一下原型。

function Fn() {
//在构造函数中,this指向构造函数本身
this.x = 1;
}
Fn.prototype.x = 2;
var f1 = new Fn();
f1.x = 3;
console.log(f1.x);

!

请问输出结果到底是?

我们来分析一下这张图片。

1、现在f1是通过Fn构造函数实例出的对象,从图中我们可以清楚看出f1.x 距离f1最近,那必然结果是3.

2、假如现在注释掉f1.x = 3;,那答案又是多少? 我们只要又从图中找,

f1距离Fn.x = 1;(图中写出Fn.a = 1了,作图的时候太马虎了).

想必看到这里大家对于原形有了初步了解,那我再总结一下。

通俗来讲,原型就是构造函数下面的方法和属性,重要的事情说三遍,为了区分普通函数,构造函数首字母大写。通过new这个构造函数,得到实例化对象。然后挂载在构造函数上面的方法和属性就可以直接用了。最常见就是Array,String这些常见属性和方法了。


什么是__proto__?

每个函数function都有一个prototype,即原型。这里再加一句话——每个对象都有一个__proto__,可成为隐式原型。

console.log(f1.__protot__ === Fn.prototype) //true

限于篇幅,在这里就不过多介绍这个属性了,感兴趣的朋友可以查阅相关资料。


constructor是什么?

再回到之前那张流程图,在Fn原型下有个constructor属性,那这个属性是怎么来的?有什么用呢?

每个构造函数都会默认生成一个这个属性,它的作用是指向构造函数本身。

可能有朋友看到过怎么判断一个变量是不是数组的面试题?

如果用了这个constructor判断是不是指向Array就入了大坑了,因为我们可以手动修改这个constructor指向。

最好使用

Object.prototype.toString.call(arr) === '[object Array]';


这个constructor到底怎么来的?

为了目标这个问题,我们的得弄明白,引用类型和值类型。像String,Number,undefined,boolean类型,这些都是值类型,而引用类型是Object,function,null之类的。引用类型都是对象,对象是属性的集合。

Object的原型下有个方法就是constructor,而我们创建的f1的constructor就是来源于Object,通过原形链的方法去查找。即Object是顶层对象,当我们要访问f1.constructor的时候,发现Fn构造函数上没有这个属性,那我们去创建Fn对象(Fn是一个构造函数,当然也是一个引用类型,那必须是对象啊)构造函数上去找,最后找到Object上去了。这就构成了原形链。真是环环相扣啊。


注:限于知识水平不够,可能有些地方解释的不够清楚,本人也一直在学习当中!如果有错误,欢迎大家指正,共同学习!

JavaScript原型(链)学习笔记的更多相关文章

  1. javaScript 原型与原型链学习笔记

    javaScript中,原型是常用到一种方式,它能降低储存占用,写出更高效的代码 原型常用到的则是prototype属性 JavaScript prototype 属性 定义和用法 prototype ...

  2. JavaScript原型与原型链学习笔记

    一.什么是原型?原型是一个对象,其他对象可以通过它实现属性继承.简单的说就是任何一个对象都可以成为原型 prototype属性: 我们创建的每个函数都有一个prototype属性,这个属性是一个指针, ...

  3. 【转载】Javascript原型继承-学习笔记

    阮一峰这篇文章写的很好 http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javas ...

  4. JavaScript 原型链学习(四)原型链的基本概念、原型链实现继承

    简单回顾一下构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针.那么,假如我们让原型对象等于另一个类型的实例,结果会 ...

  5. JavaScript作用域(链)学习笔记

    作用域是javascript老生常谈的问题,在面试题中也经常出现.此文记录本人对js作用域的理解.从以下三个方面深入探讨js作用域和js作用域链. 1.什么是作用域? 2.什么是作用域链? 3.常见面 ...

  6. javascript作用域链学习笔记

    作用域链 "JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里." --权威指南 在JavaScript中,一切皆对象,包括函数.函数对象和其它对象 ...

  7. JavaScript 原型链学习(一)原型对象

    在JavaScript中创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有的实例共享的属性和方法.如果按照字面意思来理解 ...

  8. JavaScript 原型链学习(三)原型对象存在的问题 与 组合使用构造函数和原型

    原型对象也不是没有缺点.首先,它省略了为构造函数传递初始化参数这一环节, 结果所有实例在默认情况下都将取得相同的属性值.虽然这会在某种程度上带来一些不方便, 但还不是原型对象的最大问题.原型对象的最大 ...

  9. JavaScript 原型链学习(二)原型的动态性

    由于在原型中查找值的过程是一次搜索,因此我们对原型对象所做的任何修改都能够立即从实例上反映出来,即使是先创建了实例后修改原型也照样如此.如下示例: var friend = new Person(); ...

随机推荐

  1. Linux下的TUN/TAP编程

    linux下实现虚拟网卡我们在使用VMWARE的虚拟化软件时经常会发现它们能都能虚拟出一个网卡,貌似很神奇的技术,其实在Linux下很简单,有两种虚拟设 备,TUN时点对点的设备,tap表示以太网设备 ...

  2. 测试HAPROXY的文件分流办法

    测试HAPROXY的文件分流办法 http://blog.chinaunix.net/uid-20553497-id-3054980.html http://blog.sina.com.cn/s/bl ...

  3. 转载 C++常用库函数atoi,itoa,strcpy,strcmp的实现

    C++常用库函数atoi,itoa,strcpy,strcmp的实现 C语言字符串操作函数 1. 字符串反转 - strRev2. 字符串复制 - strcpy3. 字符串转化为整数 - atoi4. ...

  4. Asp.net使用jQuery实现数据绑定与分页

    使用jQuery来实现Gridview, Repeater等服务器端数据展示控件的数据绑定和分页.本文的关注重点是数据如何实现数据绑定. Content jQuery的强大和可用性使得其迅速的流行起来 ...

  5. jQuery + jQuery Mobile 实现省市二级下拉列表页面

    一.需求: 提供省.市下拉列表,当用户选择省一级下拉列表项后,市下拉列表的各个选项自动变为该省对应的城市列表. 二.效果: 三.实现: 1.省市json数据,来自: http://www.cnblog ...

  6. 如何利用PhoneGap制作地图APP

    摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开发出移动平台上能使用的APP了! --------------- ...

  7. 调研js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  8. 【JavaScript】JavaScript的Function与Object浅析

    前言: JavaScript的面向对象是基于原形的,所有对象都有一条属于自己的原型链.Object与Function可能很多看Object instanceof Function , Function ...

  9. TP复习

    第一课,三步骤 1,.名称   2.路径 3.引用核心文件 4,.公用的可以建立public  upload css 等 第二课 uRL四中模式 ~ActionClass.php 一.什么是MVC / ...

  10. [ES6] 13. Using the ES6 spread operator ...

    The spread operator (...) allows you to "explode" an array into its individual elements. S ...