美文网首页
原型链详解

原型链详解

作者: 命运齿轮1 | 来源:发表于2018-04-10 21:24 被阅读0次

title: 技术分享篇

Welcome

原型链

原型对象

在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象 Object 和 函数对象 Function。

一般通过 new Function 产生的对象是函数对象,其他对象都是普通对象。

所有的对象都有(proto)属性 只有函数对象有(prototype)属性

函数对象

    function fn(){};
    var fn1=function(){};
    console.log(typeof fn);    //function 
    console.log(typeof fn1);    //function 
    console.log(typeof Object);    //function 
    console.log(typeof Array);    //function 
    console.log(typeof Date);    //function 
    ......

原型对象其实就是构造函数的一个实例对象,例如人对象,相当于在person创建的时候,自动创建了一个它的实例,并且把这个实例赋值给了prototype。

    function Person(){};  
    let temp = new Person();  
    Person.prototype = temp;  

原型链

原型链是实现继承的主要方法

原型链的思路:利用原型让一个引用类型继承另一个引用类型的属性和方法。

JS通过原型链实现继承列子:

    //定义一个 Animal 构造函数
    function Animal(){
        this.type = 'Animal';   
    }
    //给 Animal 定义方法
    Animal.prototype.speack = function(){
        console.log(this.type);
    } 
    // 定义一个 Dog 对象
    function Dog(name){
        this.name = name;
        this.type = '汪汪汪';
    }
    //改变 Dog 的 prototype 指针,指向一个 Animal 实例
    Dog.prototype = new Animal();

    Dog.prototype.speak = function () {
        console.log(this.name+this.type+"叫");
    }

    var dog = new Dog('小黄');
    dog.speak();  //Animal 
    //输出 小黄汪汪汪叫。

这就说明,我们可以通过原型链的方式,实现 Dog 继承 Animal 的所有属性和方法。

总结来说: Dog.prototype 指向的原型对象后,实例的内部指针也发生了改变,指向了新的原型对象,然后就能实现类与类之间的继承了。(但是如果在重写原型对象之前,产生的实例,其内部指针指向的还是最初的原型对象。)

相关文章

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • Javascript(三)之原型继承理解

    进阶路线 3 原型继承 3.1 优秀文章 最详尽的 JS 原型与原型链终极详解 一 最详尽的 JS 原型与原型链终...

  • 原型和原型链

    原型链分享 原项链详解 什么是原型链: javaScript 常被描述为一种基于原型的语言(prototype-b...

  • 原型链详解

    一、什么是原型链 原型链是javascript中用来实现类似类继承的一套机制。像链条一样把javascript中的...

  • 原型链详解

    title: 技术分享篇 Welcome 原型链 原型对象 在Javascript中,万物皆对象,但对象也有区别,...

  • 原型与原型链详解

    前言 与大部分面向对象语言不同,JavaScript中并没有引入类(class)的概念,JavaScript并非通...

  • 原型与原型链详解

    前言 与大部分面向对象语言不同,ES6之前并没有引入类(class)的概念,JavaScript并非通过类而是直接...

  • 原型与原型链详解

    构造函数创建对象: Person 就是一个构造函数,我们使用 new 创建了一个实例对象 person proto...

  • JS原型和原型链详解

    声明:此文为转载文章,为了自己看起来方便特此重新排版,等日后看懂了再自己整理疏解,查看原文请点击这里。 正文: J...

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

网友评论

      本文标题:原型链详解

      本文链接:https://www.haomeiwen.com/subject/raqohftx.html