美文网首页程序员
JavaScript原型模式(prototype)

JavaScript原型模式(prototype)

作者: WEB攻程狮 | 来源:发表于2017-10-08 12:50 被阅读0次

1.原型是一个对象,其他对象可以通过它实现属性的继承

所有对象在默认的情况下都有一个原型,因为原型的本身也是对象,所以一个类的真正原型是被类的内部[prototype]属性所指出

2.什么可以称之为对象?

在JavaScript中一个对象:就是任何的无序的键值对的集合function var a={}如果他不是一个主数据类型(undefined null boolean number string)其他的通通叫做对象。
JavaScript中的原型(prototype)是和函数(function紧密相连的)var o={} 他不是有用function他有原型吗? 答:必须的
每一个通过new操作符生成出来的对象都持有一个属性proto,这个属性保存了创建他的构造函数的prototype的原型的引用。

类的扩展方式有两类共三种:

说明一下,是在原型链上层扩展出来的。
两类:分为是否是function定义的类分为两种。
由function定义的只有一种,不是有function定义的有两种。
(1)由function定义的类

(2)不是由function定义的类,有隐示扩展和显示扩展。
(2.1)第一种扩展方式,显示扩展,通过Object

Object.getPrototypeOf(cat).name="猫咪";//通过object获取原型链

(2.2)第二种扩展方式,隐示扩展,通过proto属性。

cat.__proto__.age=9;//我在上层《==》 cat.age=10;

(3)调用

cat.name+cat.age //猫咪 10

画图理解为:


梳理一下,利用原型链实现简单的继承

function  person() {
    this.getName=function (str) {
        alert(str);
    }
}
person.prototype.getAge=function (age) {
    alert(age);
}

1,实现一个空类继承function定义的类的属性.

方法为,让空类的对象所持有的原型的索引(proto)变成function类所持有的原型的索引(prototype)。

2,简单方式实现继承

使用图梳理一下原理:
索引的变化:
(1)

(2)如果per是空对象的话,类b就完全变成类per.

(3)当per不为空时,实质为,b.proto=new per();b类只接在per类后面。

此时b的构造函数是per的构造函数(b继承per而来的)
但是,我们需要的时b类自身的构造函数,可以使用以下方法实现继承后构造函数的改变。
b.proto.constructor=b;//只是改变构造函数
说明一下,此时为类b除去构造函数外继承与类per。

学习前端的同学注意了!!!
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入前端学习交流群461593224,我们一起学前端!

相关文章

  • 原型和继承 -- 总结

    原型模式 原型模式在《JavaScript高级程序设计》中的定义: 我们创建的每个函数都有一个prototype(...

  • 原型与原型链

    原型(prototype) 在JavaScript中,原型(prototype)也是一个对象,通过原型可以实现对象...

  • 原型与原型链

    原型(prototype) 在JavaScript中,原型(prototype)也是一个对象,通过原型可以实现对象...

  • 设计模式之原型模式详解(附源代码)

    原型模式(Prototype Pattern) 原型模式(Prototype Pattern)是用于创建重复的对象...

  • 理解JavaScript的核心知识点:原型

    Understanding JavaScript Core: Prototype JavaScript 中的原型机...

  • JavaScript原型模式(prototype)

    1.原型是一个对象,其他对象可以通过它实现属性的继承 所有对象在默认的情况下都有一个原型,因为原型的本身也是对象,...

  • JavaScript 原型链学习

    JavaScript prototype 与 _proto_(原型链解析) prototype 概念 protot...

  • 原型链

    原文出处 JavaScript深入之从原型到原型链 prototype 每个函数都有一个 prototype 属性...

  • JS 继承

    1.原型链继承:prototype 2.原型链继承2:prototype 注意:JavaScript的类继承其实本...

  • 学习JavaScript的原型笔记

    JavaScript的原型(prototype、proto、constructor) 构造函数:function ...

网友评论

    本文标题:JavaScript原型模式(prototype)

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