首页 web前端 js教程 Javascript继承(上)——对象构建介绍_JavaScript

Javascript继承(上)——对象构建介绍_JavaScript

May 16, 2016 pm 05:48 PM
创建 对象

Javascript中存在“类”么?

万物皆对象
Javascript中除了基本数据(Undefined、Null、Boolean、Number、String),其他都是对象(Object)。
实际上,Javascript中的对象是数据与功能的集合。例如我们知道:

复制代码 代码如下:

var foo = new Function("alert('hello world!')");
foo();

可见foo是一个函数,也是一种对象。再比如说:
复制代码 代码如下:

function foo(){
//do something
}

foo.data = 123;
foo["data2"] = "hello";

alert(foo.data);
alert(foo.data2);

函数也可以像对象一样添加属性。
对象的构建
一般我们用构造函数来构建对象,但如果没有构造函数,我们也有办法构建我们想要的对象:
复制代码 代码如下:

function creatPerson(__name, __sex, __age){
return {
name: __name,
sex: __sex,
age: __age,
get: function(__key){
alert(this[__key]);
}
};
}

var Bob = creatPerson("Bob", "male", 18);
Bob.get("name"); //Bob
Bob.get("sex"); //male
Bob.get("age"); //18

但是这不够,我希望方法是可以共享的。比如我再用该函数创建一个Tom对象,get函数就又被创建了一次,这明显地浪费了我的内存。
导入共享资源
因为我们知道函数也是对象,所以我们可以把需要共享的方法或属性放在放在他“身上”:
复制代码 代码如下:

function creatPerson(__name, __sex, __age){
var common = arguments.callee.common;
return {
//自身的属性
name: __name,
sex: __sex,
age: __age,
//自身的方法
sayhi: function(){alert("hi");},
//共享的方法
get: common.get,
getType: common.getType,
//共享的属性
type: common.type
};
}
creatPerson.common = {
get:function(__key){
alert(this[__key]);
},
getType: function(){
alert(this.type);
},
type: "Person"
};

var Bob = creatPerson("Bob", "male", 18);
Bob.get("name"); //Bob
Bob.get("sex"); //male
Bob.getType(); //Person

于是我们就用蹩脚的方法,成功的创建了一个拥有自有属性方法和共享属性方法的对象。但实际上,Javascript就是这么蹩脚地创建对象的。
其实共享属性没有真正实现,因为这个共享属性,依然只是一个副本。这并不是我们真正希望的共享属性。

new关键字
和上面的“对象的构建”相同,new的目的是创建对象的自有属性和方法。例如:
复制代码 代码如下:

function Person(__name, __sex, __age){
this.name = __name;
this.sex = __sex;
this.age = __age;
this.get = function(__key){
alert(this[__key]);
};
}

var Bob = new Person("Bob", "male", 18);
Bob.get("name"); //Bob
Bob.get("sex"); //male
Bob.get("age"); //18

原型(Prototype)
Javascript的作者用了和上面“导入共享资源”的方法差不多。既然函数也是对象,那么把需要共享的“东东”放在他“身上”吧:
复制代码 代码如下:

function Person(__name, __sex, __age){
this.name = __name;
this.sex = __sex;
this.age = __age;
this.sayhi = function(__key){
alert("hi");
};
}
Person.prototype = {
constructor: Person,
get: function(__key){
alert(this[__key]);
}
};

var Bob = new Person("Bob", "male", 18);
Bob.get("name"); //Bob
Bob.get("sex"); //male
alert(Bob.constructor); //function Person


Javascript创建对象的模型是简洁的,new来处理自身问题,prototype来处理共享问题。

如果说Java的对象(实例)产生方式是将原材料丢到模子里(类)熔炼而成;那么Javascript的对象产生方式就是给材料给建筑工(构造函数)让他按图纸搭建而成。

实际流程

当然实际流程并不是这样的,新建一个对象先做的是处理共享资源,例如:
复制代码 代码如下:

function A(){
console.dir(this);
alert(this.type); //A
}
A.prototype.type = "A";
var a = new A();



通过console.dir将a打印出来我们可以看到:
type "A"
__proto__ A {type = "A"}
  type "A"
  constructor A()

构造函数新建一个对象以后,立刻将其prototype的引用赋给新建对象的内部属性__proto__,然后再运行构造函数里面的构造语句。

并没有覆盖
复制代码 代码如下:

function A(){
this.type = "B"
}
A.prototype.type = "A";

var a = new A();
alert(a.type); //B

当我们想得到a.type时,引擎会先去在a对象中查看是否有属性type,如果有则返回该属性,没有则试图在__proto__中查找是否有type属性,如果有则返回该属性。

__proto__并不是标准的,比如IE上没有,但IE上也有类似的内部属性,但我们也无法使用它。

基于这个原因,我们删掉a.type时依然可以返回a.type:
复制代码 代码如下:

function A(){
this.type = "B"
}
A.prototype.type = "A";

var a = new A();
alert(a.type); //B
delete a.type;
alert(a.type); //A

到底有没有类?

严格地讲,Javascript并没有类(class)这种东西。
但有时候我们会用构造函数的名字作为利用该构造函数创建的对象们的“类型(type not class)名”,以方便我们用Javascript进行面向对象编程时的交流。
名字只是一个代号,一个方便理解的工具罢了。

参考文献

Javascript继承机制的设计思想
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何在真我手机上创建文件夹? 如何在真我手机上创建文件夹? Mar 23, 2024 pm 02:30 PM

标题:真我手机新手指南:如何在真我手机上创建文件夹?在当今社会,手机已经成为人们生活中必不可少的工具。而真我手机作为一款备受欢迎的智能手机品牌,其简洁、实用的操作系统备受用户喜爱。在使用真我手机的过程中,很多人可能会遇到需要整理手机中的文件和应用的情况,而创建文件夹就是一种有效的方式。本文将介绍如何在真我手机上创建文件夹,帮助用户更好地管理自己的手机内容。第

如何在GIMP中创建像素艺术 如何在GIMP中创建像素艺术 Feb 19, 2024 pm 03:24 PM

本文将引起您的兴趣,如果您有意在Windows上使用GIMP进行像素艺术创作。GIMP是一款著名的图形编辑软件,不仅免费开源,还能帮助用户轻松创建出美丽的图像和设计。除了适用于初学者和专业设计师外,GIMP也可以用于制作像素艺术,这种数字艺术形式是利用像素作为唯一构建块来进行绘制和创作的。如何在GIMP中创建像素艺术以下是在WindowsPC上使用GIMP创建像素图片的主要步骤:下载并安装GIMP,然后启动应用程序。创建一个新的形象。调整宽度和高度的大小。选择铅笔工具。将笔刷类型设置为像素。设置

格力+如何创建家庭 格力+如何创建家庭 Mar 01, 2024 pm 12:40 PM

很多朋友表示想知道在格力+软件里该怎么去创建家庭,下面为大家带来了操作方法,想要了解的朋友和我一起来看看吧。首先,打开手机上的格力+软件,并登录。接着,在页面底部的选项栏中,点击最右边的“我的”选项,即可进入个人账户页面。2.来到我的页面后,在“家庭”下方的选项里有一个“创建家庭”,找到后在它的上面点击进入。3.接下来跳转到创建家庭的页面里,根据提示在输入框里输入要设置的家庭名称,输入好后在右上角点击“保存”按钮。4.最后在页面下方会弹出一个“保存成功”的提示,代表家庭已经成功创建好了。

如何使用Highcharts创建甘特图表 如何使用Highcharts创建甘特图表 Dec 17, 2023 pm 07:23 PM

如何使用Highcharts创建甘特图表,需要具体代码示例引言:甘特图是一种常用于展示项目进度和时间管理的图表形式,能够直观地展示任务的开始时间、结束时间和进度。Highcharts是一款功能强大的JavaScript图表库,提供了丰富的图表类型和灵活的配置选项。本文将介绍如何使用Highcharts创建甘特图表,并给出具体的代码示例。一、Highchart

如何创建您的 iPhone 联系人海报 如何创建您的 iPhone 联系人海报 Mar 02, 2024 am 11:30 AM

在iOS17中,Apple为其常用的“电话”和“通讯录”应用程序新增了联系人海报功能。这一功能允许用户为每个联系人设置个性化的海报,使通讯录更具可视化和个性化。联系人海报可以帮助用户更快速地识别和定位特定联系人,提高了用户体验。通过这一功能,用户可以根据自己的喜好和需求,为每个联系人添加特定的图片或标识,使通讯录界面更加生动iOS17中的Apple为iPhone用户提供了一种新颖的方式来表达自己,并添加了可个性化的联系海报。联系人海报功能允许您在呼叫其他iPhone用户时展示独特的个性化内容。您

Django初探:用命令行创建你的首个Django项目 Django初探:用命令行创建你的首个Django项目 Feb 19, 2024 am 09:56 AM

Django项目开启之旅:从命令行开始,创建你的第一个Django项目Django是一个强大而又灵活的Web应用框架,它以Python为基础,提供了许多开发Web应用所需的工具和功能。本文将带领你从命令行开始,创建你的第一个Django项目。在开始之前,请确保你已经安装了Python和Django。步骤一:创建项目目录首先,打开命令行窗口,并创建一个新的目录

如何将 MySQL 查询结果数组转换为对象? 如何将 MySQL 查询结果数组转换为对象? Apr 29, 2024 pm 01:09 PM

将MySQL查询结果数组转换为对象的方法如下:创建一个空对象数组。循环结果数组并为每一行创建一个新的对象。使用foreach循环将每一行的键值对赋给新对象的相应属性。将新对象添加到对象数组中。关闭数据库连接。

如何创建mdf文件 如何创建mdf文件 Feb 18, 2024 pm 01:36 PM

MDF文件是一种常见的数据库文件格式,它是MicrosoftSQLServer数据库的主要文件之一。在数据库管理系统中,MDF文件用于保存数据库的主要数据,包括表、索引、存储过程等。建立MDF文件是创建数据库的关键步骤之一,下面将介绍一些常见的方法。使用SQLServerManagementStudio(SSMS)SQLServerManag

See all articles