博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript对象的深入理解(二)
阅读量:5809 次
发布时间:2019-06-18

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

之前提到,构造函数方法创建对象存在着方法不共享的问题,因此引申出了原型模式创建对象

原型模式

原型模式旨在创建一个模版对象,该对象的所有属性和方法被其实例所共享。

原型的概念

不同于构造函数模式创建对象只能单级即成,得益于原型链的概念,原型模式可实现类似其他OOP语言的多级继承。

原型链:一系列有继承关系的函数(对象)中[[prototype]]属性自底向上的指向

先给一个例子:

function Person() {    }Person.prototype = {      constructor: Person,    name: "Jonathan",    age: 23,      job: developer,      sayName: function() {        console.log(this.name);    }}person1 = new Person();person2 = new Person();

该例子中各对象的关系如下

//

每一个函数(对象)都可以视为一个模版,向上看,该对象的[[prototype]]

创建原型对象

function Person() {}Person.prototype = {      constructor: Person,    name: "Jonathan",    age: 23,      job: developer,      sayName: function() {        console.log(this.name);    }}var person1 = new Person();person1.sayName(); //"Jonathan"var person2 = new Person();person2.sayName(); //"Jonathan"console.log(person1.sayName == person2.sayName); //true

要点

  1. 先命名一个空函数
  2. 用对象字面量方式,为该函数的.prototype属性添加原型属性及方法
  3. 为了constructor属性的正确指向,应先把constructor指向该对象

原型对象的问题

由于众多实例共享原型的属性,因此改变其中某个实例的属性会影响到全局,造成属性污染,例子如下:

function Person(){}Person.prototype = {    constructor: Person,    name : "Nicholas",    age : 29,    job : "Software Engineer",    friends : ["Shelby", "Court"],    sayName : function () {        alert(this.name);    }};var person1 = new Person();var person2 = new Person();person1.friends.push("Van");alert(person1.friends);    //"Shelby,Court,Van"alert(person2.friends);    //"Shelby,Court,Van"alert(person1.friends === person2.friends);  //true

可见,person1的friends属性污染了person2的friends属性。为避免这种情况,引入组合构造函数与原型模式。

组合使用构造函数与原型模式

单一使用原型对象的问题在于所有属性皆共享,若不想共享某属性,则可放入构造函数中。

function Person(name, age, job){   this.name = name;    this.age = age;    this.job = job;    this.friends = ["Boy next door", "Deep dark fantasy"];}Person.prototype = {    constructor: Person,    sayName : function () {        alert(this.name);    }};var person1 = new Person("Nicholas", 29, "Software Engineer");var person2 = new Person("Greg", 27, "Doctor");person1.friends.push("Van");alert(person1.friends);    //"Shelby,Court,Van"alert(person2.friends);    //"Shelby,Court"alert(person1.friends === person2.friends);  //falsealert(person1.sayName === person2.sayName);  //true

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

你可能感兴趣的文章
[转载]设置Ubuntu自动连接无线,无须再输入密钥环和无线密码
查看>>
九叔Xen App测试报告
查看>>
Apache配置
查看>>
Ext gridPanel 单元格数据的渲染
查看>>
Android SDK 的下载代理
查看>>
Method Swizzling对Method的要求
查看>>
佛祖保佑,永不宕机
查看>>
四、配置开机自动启动Nginx + PHP【LNMP安装 】
查看>>
LNMP一键安装
查看>>
SQL Server数据库概述
查看>>
Linux 目录结构及内容详解
查看>>
startx命令--Linux命令应用大词典729个命令解读
查看>>
华为3026c交换机配置tftp备份命令
查看>>
Oracle命令导入dmp文件
查看>>
OCP读书笔记(24) - 题库(ExamD)
查看>>
Http、TCP/IP协议与Socket之间的区别(转载)
查看>>
解决Unable to load R3 module ...VBoxDD.dll (VBoxDD):GetLastError=1790
查看>>
.net excel利用NPOI导入oracle
查看>>
vrpie在Visio Studio 中无法调试的问题
查看>>
第六课:数据库的基本工具
查看>>