美文网首页
JavaScript原型

JavaScript原型

作者: 苏晓枫 | 来源:发表于2018-11-03 17:54 被阅读0次
  • 先来看看构造函数、原型和实例的关系
  1. 在JavaScript中,所有的函数都有 prototype (显式原型)属性,这个属性指向一个对象,即原型对象。
  2. 原型对象中又包含一个指针(就是constructor),它指向原型对象所属的构造函数。
  3. 每个实例对象都有一个__proto__ (隐式原型,这个属性官方定义为:[[prototype]] 属性,这个属性指向构造函数的原型对象。来看下代码,解释我所说的几点:
function Person(){
    this.name = [];
    this.say = function() {
    console.log(this.name);
    }
}
var jack = new Person();  // 创建一个Person实例
jack.name.push('jack');
console.log(jack.name);
jack.say();
console.log(Person.prototype.constructor === Person);   // true
// 实例对象的 constructor 属性是从构造函数的原型对象中继承过来的。
console.log(jack.constructor === Person);    // true
console.log(jack.__proto__ === Person.prototype)    // true
  • 弄清楚构造函数、原型和实例的关系之后,我们进入正题:原型链

原型链说白了就是实例对象和原型对象之间实现属性共享和继承的纽带吧,环环相扣像链条一样。

来看下代码

function Grand() {
            this.name = "grandpa";
        }
        Grand.prototype.sayName = function() {
            console.log(this.name);
        }
        Grand.prototype.hobby = function() {
            console.log("play chess");
        }

        function Father() {
            this.name = "father";
        }
        Father.prototype = new Grand();
        Father.prototype.hobby = function() {
            console.log("programme");
        }
        function Son() {
            this.name = "son";
        }
        Son.prototype = new Father();
        Son.prototype.hobby = function() {
            console.log("王者荣耀");
        }
        var grand = new Grand();
        var father = new Father();
        var son = new Son();

        grand.sayName();  // grandpa
        grand.hobby();  // play chess

        father.sayName();  // father
        father.hobby();  // programme

        son.sayName();   // son
        son.hobby();   // 王者荣耀

我来解释下上述代码:
首先,有三个构造函数,Grand,Father和Son.我们让 Father.prototype = new Grand(); 来实现Father对Grand的继承,通过 Son.prototype = new Father(); 来实现Son对Father的继承。这样Father 和 Son的实例就能够访问到Grand原型上的方法。
访问hobby方法的过程:

  • 在实例对象father和son中都有一个 __proto__属性,这个属性指向各自的构造函数的原型对象。当我们通过son.hobby() 来访问hobby这个方法时,它首先会在自己身上找,看有没有这个方法,没有就进行下一步:
  • Son.prototype 上面找,看有没有hobby这个方法,结果找到了,就可以调用该方法。

这里我们是重写了Grand原型对象中的hobby方法,当我们没有从写该方法时过程就是这样的:

总结以下属性寻找规则:

  1. 在访问某个对象的某个属性的时候,会首先在自己身上找是否存在该属性;
  2. 如果在对象身上没有该属性,就会到该对象构造函数的原型对象上去找;
  3. 如果原型对像上还没有,就到原型对象的原型上去找;
  4. 一直找到Object的原型对象的原型,即Object.prototype.__proto__ = null 为止。

相关文章

  • 原型、原型链

    理解JavaScript原型 彻底理解JavaScript原型 原型 原型是一个对象,所有对象都可以成为原型,其...

  • javascript碎片知识001

    javascript中的对象(原型,原型链) 什么是原型? 原型是JavaScript中的继承的基础,JavaSc...

  • 原型和原型链篇

    原型和原型链 1.理解原型设计模式以及JavaScript中的原型规则 原型设计模式JavaScript是一种基于...

  • 函数的原型对象

    什么是原型? 原型是Javascript中的继承的继承,JavaScript的继承就是基于原型的继承。 函数的原型...

  • 面试题 Javascript

    介绍JavaScript的基本数据类型。 说说写JavaScript的基本规范? JavaScript原型,原型链...

  • JavaScript 基础知识点

    介绍JavaScript的基本数据类型。 说说写JavaScript的基本规范? JavaScript原型,原型链...

  • js原型、原型链、继承的理解

    一、原型、原型链 原型是Javascript中的继承的基础,JavaScript的继承主要依靠原型链来实现的。 原...

  • JavaScript面试考点之原型及原型链

    1、JavaScript原型及原型链 1)原型 JavaScript是一种基于原型的语言,即每一个对象拥有一个原型...

  • 一文带你彻底理解 JavaScript 原型对象

    一、什么是原型 原型是Javascript中的继承的基础,JavaScript的继承就是基于原型的继承。 1.1 ...

  • JavaScript深入系列的学习(一)

    JavaScript深入之从原型到原型链JavaScript深入之词法作用域和动态作用域JavaScript深入之...

网友评论

      本文标题:JavaScript原型

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