博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript原型
阅读量:6037 次
发布时间:2019-06-20

本文共 1697 字,大约阅读时间需要 5 分钟。

构造函数创建对象带来的问题

介绍了JavaScript创建对象的几种方法,都有各自的优缺点。

构造函数看起来好像很好,但是它也有一个问题,那就是创建出来的每一个实例对象的方法都是一个独立的函数,即使他们的内容是完全相同的,这是不符合函数的代码复用原则的,而且也不能够统一的修改已被创建的实例的方法。

function Person(name, age, sex) {        this.name = name;        this.age  = age;        this.sex  = sex;                this.introduce = function () {            console.log("我叫" + this.name + ", 今年" + this.age + "岁.");        };    }        var jerry = new Person("Jerry", "21", "M");    var julia = new Person("Julia", "27", "F");    console.log(jerry.introduce === julia.introduce);        // false

上述代码中的jerry对象和julia对象的introduce()方法是两个独立的函数,数据不共享,如果对象创建更多就浪费了大量的内存空间。

JavaScript原型解决方案

在 JavaScript 中,每当定义一个对象(函数也是对象)时候,对象中都会包含一些预定义的属性。其中每个函数对象都有一个 prototype 属性,这个属性指向函数的原型对象。

那么,这个原型对象有什么作用呢?

构造函数是一个函数对象,所以就会有一个 prototype 属性,也就有了一个原型对象,既然这是一个对象,那么久可以为它添加属性和方法。而这个原型对象作为这个构造函数的一个属性,是被其创建出来的所有实例共享的。

所以上面的代码我们可以这样改写

function Person(name, age, sex) {        this.name = name;        this.age  = age;        this.sex  = sex;    }    Person.prototype.introduce = function () {        console.log("我叫" + this.name + ", 今年" + this.age + "岁.");    };    var jerry = new Person("Jerry", "21", "M");    var julia = new Person("Julia", "27", "F");    console.log(jerry.introduce === julia.introduce);        // true

这样就解决了数据共享的问题,达到了代码复用的目的,无论通过此构造函数创建了多少个对象,introduce 方法只会占用一份内存空间。

且可以统一修改所有 Person 构造函数创建的实例对象的 introduce 方法。

原型对象中的方法是可以相互调用的

function Dog(name, age) {        this.name = name;        this.age = age;    }    Dog.prototype.play = function () {        console.log("小狗玩耍");        this.bark();    };    Dog.prototype.bark = function () {        console.log("小狗叫");    };    var tom = new Dog("Tom", 3);        tom.play();// 小狗玩耍    小狗叫

转载地址:http://nplhx.baihongyu.com/

你可能感兴趣的文章
zDiaLog弹出层
查看>>
linux不常用但很有用的命令(持续完善)
查看>>
NFine常见错误
查看>>
zabbix报警媒介------>微信报警
查看>>
使用视图的好处
查看>>
面向开发运维的10款开源工具
查看>>
MVC ---- 增删改成 EF6
查看>>
linux 下 php 安装 pthreads
查看>>
Spring Boot学习笔记
查看>>
python3存入redis是bytes
查看>>
laravel 集合接口
查看>>
C/C++二进制读写png文件
查看>>
记一次SQLServer的分页优化兼谈谈使用Row_Number()分页存在的问题
查看>>
thymleaf 常用th 标签
查看>>
hql 语法详解
查看>>
【Math】矩阵求导
查看>>
四层、七层负载均衡的区别
查看>>
51NOD 1821 最优集合 [并查集]
查看>>
ListView 添加 HeaderView常见错误
查看>>
C#软件license管理(简单软件注册机制)
查看>>