1、原型是什么？原型链是什么？

原型是一个prototype对象，用于表示类型之间的关系；

原型链指的是在JavaScript中对象之间的继承是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。

举例：

Student——>Person——>Object：学生继承人这个类，人这个类继承对象类；

<span style="font-size:14px;">
  var Person=function(){
      this.age="匿名"
  };

  var Student=function(){};

  //创建继承关系,prototype执行Person的一个实例对象

  Student.prototype=new  Person();
</span>

五条原型规则：

1、所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（除了“null”以外）；

2、所有的引用类型都有一个_proto_属性，叫隐式原型，属性值是一个普通的对象；

3、所有的函数，都有一个prototype属性，叫显式原型，属性值是一个普通的对象；

4、所有的引用类型的_proto_属性，指向它的构造函数的prototype属性值；

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script>

            //所有的引用类型都具有对象属性

            var obj = {};

            obj.a = ;

            var arr = [];

            arr.a = ;

            function fn(){}

            fn.a = ;

            //所有的引用类型都有一个隐式原型

            console.log(obj.__proto__);

            console.log(arr.__proto__);

            console.log(fn.__proto__);

            //所有的函数都有一个prototype属性

            console.log(fn.prototype);

            //所有的引用类型，__proto__属性值指向它的构造函数的“prototype”属性值

            console.log(obj.__proto__ === Object.prototype);

        </script>

    </head>

    <body>

    </body>

</html>

5、当试图得到一个对象的某个属性时，如果没有，会向它的_proto_中寻找，即去它的构造函数的prototype中寻找。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script>

            //构造函数

            function Foo(name,age){

                this.name = name;

            }

            Foo.prototype.alerName = function(){

                alert(this.name);

            }

            //创建实例

            var f = new Foo('zhangsan');

            f.printName = function(){

                console.log(this.name);

            }

            //测试

            f.printName();

            f.alerName();

        </script>

    </head>

    <body>

    </body>

</html>

再次举例：

Dog类继承了Animal类，随即拥有的Animal的eat方法（非常low的一个例子）

<script type="text/javascript">

        function Animal() {

            this.eat = function () {

                console.log("animal eat");

            }

        }

        function Dog() {

            this.bark = function () {

                console.log("dog bark")

            }

        }

        Dog.prototype = new Animal();

        var hashiqi = new Dog();

        hashiqi.eat();　　　　//animal eat

        hashiqi.bark();　　　//dog bark

    </script>

接近实战的例子（一个封装DOM查询的例子）：

//一定要非常注意JavaScript的位置

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <div id="box">

            <span>测试原型继承封装原生JavaScript</span>

        </div>

    </body>

    <script>

        function Elem(id){

            this.elem = document.getElementById(id);

        }

        Elem.prototype.html = function(val){

            var elem = this.elem;

            if(val){

                elem.innerHTML = val;

                //链式操作

                return this;

            }else{

                return elem.innerHTML;

            }

        }

        Elem.prototype.on = function(type,fn){

            var elem = this.elem;

            elem.addEventListener(type,fn);

            return this;

        }

        var div1 = new Elem('box');

        div1.html('<p>hello imooc</p>').on('click',function(){

            alert('clicked');

        }).html('<p>javascript</p>');

    </script>

</html>

JavaScript中的原型和原型链的更多相关文章

  1. Javascript中的对象和原型(3)

    在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...

  2. Javascript中的对象和原型(三)（转载）

    在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...

  3. Javascript中的对象和原型(一)（转载）

    面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首 ...

  4. javascript中的对象，原型，原型链和面向对象

    一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...

  5. JavaScript中的继承（原型链）

    一.原型链 ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 实例1: function SupType() { this.pro ...

  6. 深入理解JavaScript中的继承：原型链篇

    一.何为原型链 原型是一个对象,当我调用一个对象的方法时,如果该方法没有在对象里面,就会从对象的原型去寻找.JavaScript就是通过层层的原型,形成原型链. 二.谁拥有原型 任何对象都可以有原型, ...

  7. JavaScript中的继承与原型链

    先看一个例子 function User(){} var u1 = new User(); console.log(u1.prototype);// undefined 使用对象实例无法访问到prot ...

  8. javascript中的构造函数和原型及原型链

    纯属个人理解,有错误的地方希望大牛指出,以免误人子弟 1.构造函数: 构造函数的作用 : 初始化由new创建出来的对象    new 的作用: 创建对象(空对象) new 后面跟的是函数调用,使用ne ...

  9. JavaScript中的对象与原型—你不知道的JavaScript上卷读书笔记（四）

    一.对象 对象可以通过两种形式定义:声明(文字)形式和构造形式.即: var myObj = { key: value // ... }; 或: var myObj = new Object(); m ...

  10. JavaScript——中的prototype（原型）

    JS中的prototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...

随机推荐

  1. Java Web基础——Controller+Service +Dao三层的功能划分

    转自:https://www.cnblogs.com/cielosun/articles/5752272.html 1. Controller/Service/DAO简介: Controller是管理 ...

  2. Java - 冒泡排序的基础算法（尚学堂第七章数组）

    /** * 冒泡排序的基础算法 */ import java.util.Arrays; public class TestBubbleSort1 { public static void main(S ...

  3. typescript -- ts

    算是强类型语言,javascrpt是弱类型语言,是指对数据的类型的处理,弱类型语言的特点有时候只是在支行的时候才告诉你出错了,但写的时候你是查觉不到的 ts也是以es5-7为语法标准的,开发的算是另外 ...

  4. 汉诺塔问题java实现

    问题描述 三个柱子,起初有若干个按大小关系顺序安放的盘子,需要全部移动到另外一个柱子上.移动规则:在小圆盘上不能放大圆盘,在三根柱子之间一次只能移动一个圆盘. 解题思路 使用递归算法进行处理,实在理不 ...

  5. 基于CommonKADS方法论实现知识库系统

    说明:本文是Knowledge-based systems with thecommonKADS method文章的翻译. 一.知识库系统的背景 1. 什么是知识库系统(KBS) 知识库系统是人工智能 ...

  6. Cloudera Manager安装之Cloudera Manager安装前准备(Ubuntu14.04）（一）

    其实,基本思路跟如下差不多,我就不多详细说了,贴出主要图. 博主,我是直接借鉴下面这位博主,来进行安装的!(灰常感谢他们!) 在线和离线安装Cloudera CDH 5.6.0  Cloudera M ...

  7. React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...

  8. js创建类(封装)

    js如何创建类(封装)     学过其他面向对象语言的JavaScripter,可能都应用过类,如:class{},等定义的一系列方法, 但是初学者看是学习js的时候,经常会看到这样一句话,那就是Ja ...

  9. java java-web linux C C++ 安装系统 数据结构 算法 教程分享

    qq1206630874 v18455730857 免费分享

  10. FZU 2138——久违的月赛之一——————【贪心】

    久违的月赛之一 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Stat ...