JavaScript高级之原型的引入

最新推荐文章于 2020-12-26 21:30:07 发布

杏黄的三叶草

最新推荐文章于 2020-12-26 21:30:07 发布

阅读量138

点赞数

分类专栏： Web前端JavaScript

本文链接：https://blog.csdn.net/dwjdj/article/details/104384279

版权

Web前端JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

原型的引入

在使用构造函数创建对象时，有一个自身存在的浪费内存的问题，因此引入了原型这个概念

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function Person(name,age) {
        this.name=name;
        this.age=age;
    }
    //通过原型来添加方法，数据共享，节省空间
    Person.prototype.eat=function () {
        console.log("让我在看你一眼，从南到北");
    };
    var p1=new Person("小明",20);
    var p2=new Person("小红",30);
    console.log(p1.eat==p2.eat);//true
    console.dir(p1);        //输出的是对象的结构
    console.dir(p2);
    console.dir(Person);
    console.log(p1.__proto__==Person.prototype);//true
</script>
</body>
</html>

输出结果

通过观察控制台输出的内容，我们可以知道

原型:
- 实例对象中有_proto_这个属性，叫原型，也是一个对象。这个属性是给浏览器使用,不是标准的属性----proto----可以叫原型对象
- 构造函数中prototype这个属性，叫原型，也是一个对象。这个属性是给程序员使用的，是标准的属性----prototype----可以叫原型对象
实例函数中的_proto_和构造函数中的prototype是相等的—true
因为实例对象是通过构造函数创建的，构造函数中有原型对象–prototype，实例对象的_proto_指向了构造函数的原型对象prototype
原型:__proto__或者prototype都是原型对象
原型的作用，共享数据，节省内存。

总结构造函数，实例对象和原型对象之间的关系

构造函数可以实例化对象
构造函数中有一个属性叫prototype，是构造函数的原型对象
构造函数的原型对象(prototype)中有一个constructor构造器，这个构造器指向的就是自己所在的原型对象所在的构造函数
实例对象的原型对象(proto)指向的就是该构造函数的原型对象
构造函数的原型对象(prototype)中的方法是可以被实例化对象直接访问的

杏黄的三叶草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级之原型的引入

原型的引入在使用构造函数创建对象时，有一个自身存在的浪费内存的问题，因此引入了原型这个概念<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body&gt...
复制链接

扫一扫

专栏目录