0

0

JavaScript构造器是什么

WBOY

WBOY

发布时间:2022-01-19 14:32:05

|

2687人浏览过

|

来源于php中文网

原创

在JavaScript中,构造器是一个当新建对象的内存被分配后,用来初始化该对象的一个特殊函数,对象构造器是被用来创建特殊类型的对象,在对象初次被创建时,通过接收参数,用来对成员的属性和方法进行赋值。

JavaScript构造器是什么

本教程操作环境:windows10系统、javascript1.8.5版、Dell G3电脑。

JavaScript构造器是什么

在面向对象编程中,构造器是一个当新建对象的内存被分配后,用来初始化该对象的一个特殊函数。在 JavaScript 中一切皆对象。 对象构造器是被用来创建特殊类型的对象,首先它要准备使用的对象,其次在对象初次被创建时,通过接收参数,用来对成员的属性和方法进行赋值。

对象创建

立即学习Java免费学习笔记(深入)”;

创建对象的三种基本方式:

var newObject = {};
// or
var newObject = Object.create( null );
// or
var newObject = new Object();

在 Object 构造器为特定的值创建对象封装,或者没有传递值时,它将创建一个空对象并返回它。

将一个键值对赋给一个对象的四种方式:

// ECMAScript 3 兼容形式
// 1. “点号”法
// 设置属性
newObject.someKey = "Hello World";
// 获取属性
var key = newObject.someKey;
// 2. “方括号”法
// 设置属性
newObject["someKey"] = "Hello World";
// 获取属性
var key = newObject["someKey"];
// ECMAScript 5 仅兼容性形式
// For more information see: http://kangax.github.com/es5-compat-table/
// 3. Object.defineProperty方式
// 设置属性
Object.defineProperty( newObject, "someKey", {
    value: "for more control of the property's behavior",
    writable: true,
    enumerable: true,
    configurable: true
});
// 如果上面的方式你感到难以阅读,可以简短的写成下面这样:
var defineProp = function ( obj, key, value ){
    var config = {
        value
    }
  Object.defineProperty( obj, key, config );
};
// 为了使用它,我们要创建一个“person”对象
var person = Object.create( null );
// 用属性构造对象
defineProp( person, "car",  "Delorean" );
defineProp( person, "dateOfBirth", "1981" );
defineProp( person, "hasBeard", false );
// 还可以创建一个继承于Person的赛车司机
var driver = Object.create( person );
// 设置司机的属性
defineProp(driver, "topSpeed", "100mph");
// 获取继承的属性 (1981)
console.log( driver.dateOfBirth );
// 获取我们设置的属性 (100mph)
console.log( driver.topSpeed );
// 4. Object.defineProperties方式
// 设置属性
Object.defineProperties( newObject, {
  "someKey": { 
    value: "Hello World", 
    writable: true 
  },
  "anotherKey": { 
    value: "Foo bar", 
    writable: false 
  } 
});
// 3和4中的读取属行可用1和2中的任意一种

基础构造器

正如我们先前所看到的,JavaScript 不支持类的概念,但它有一种与对象一起工作的构造器函数。使用 new 关键字来调用该函数,我们可以告诉 JavaScript 把这个函数当做一个构造器来用,它可以用自己所定义的成员来初始化一个对象。

触网万能商城建站系统免费版
触网万能商城建站系统免费版

触网万能商城系统,3年专注打磨一款产品,专为网络服务公司、建站公司、威客、站长、设计师、网络运营及营销人员打造,是一款超级万能建站利器,彻底告别代码编程和找模板,改模板,改代码的低效高成本方式,仅需一个人可服务无数客户,系统集万能官网+万能商城+万能表单+博客+新闻+分销...于一体,通过海量模块拖拽布局、万能组合和超级自定义功能,可以构建各种类型的响应式网站。

下载

在这个构造器内部,关键字 this 引用到刚被创建的对象。回到对象创建,一个基本的构造函数看起来像这样:

function Car( model, year, miles ) {
  this.model = model;
  this.year = year;
  this.miles = miles;
  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}
// 使用:
// 我们可以实例化一个Car
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
// 打开浏览器控制台查看这些对象toString()方法的输出值
console.log( civic.toString() );
console.log( mondeo.toString() );

上述是个简单版本的构造器模式,但它有两个问题:

难以继承

每个 Car 构造函数创建的对象中,toString() 之类的函数都被重新定义

这不是非常好,理想的情况是所有 Car 类型的对象都应该引用同一个函数

使用“原型( prototype )”的构造器

在 JavaScript 中函数有一个 prototype 的属性。当我们调用 JavaScript 的构造器创建一个对象时,构造函数 prototype 上的属性对于所创建的对象来说都能被访问和调用

function Car( model, year, miles ) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}
// 注意这里我们使用 Object.prototype.newMethod 而不是 Object.prototype ,以避免我们重新定义原型对象
Car.prototype.toString = function () {
  return this.model + " has done " + this.miles + " miles";
};
// 使用:
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
console.log( civic.toString() );
console.log( mondeo.toString() );

通过上面代码,单个 toString() 实例被所有的 Car 对象所共享了。

相关推荐:javascript学习教程

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

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

相关专题

更多
vlookup函数使用大全
vlookup函数使用大全

本专题整合了vlookup函数相关 教程,阅读专题下面的文章了解更多详细内容。

26

2025.12.30

金山文档相关教程
金山文档相关教程

本专题整合了金山文档相关教程,阅读专题下面的文章了解更多详细操作。

28

2025.12.30

PS反选快捷键
PS反选快捷键

本专题整合了ps反选快捷键介绍,阅读下面的文章找到答案。

25

2025.12.30

表格中一行两行的方法
表格中一行两行的方法

本专题整合了表格中一行两行的相关教程,阅读专题下面的文章了解更多详细内容。

3

2025.12.30

cpu温度过高解决方法大全
cpu温度过高解决方法大全

本专题整合了cpu温度过高相关教程,阅读专题下面的文章了解更多详细内容。

5

2025.12.30

ASCII码介绍
ASCII码介绍

本专题整合了ASCII码相关内容,阅读专题下面的文章了解更多详细内容。

31

2025.12.30

GPS是什么
GPS是什么

本专题整合了GPS相关内容,阅读专题下面的文章了解更多详细内容。

3

2025.12.30

wifi拒绝接入
wifi拒绝接入

本专题整合了wifi拒绝接入相关教程,阅读下面的文章了解更多详细方法。

9

2025.12.30

丰网速运介绍
丰网速运介绍

本专题整合了丰网速运查询入口以及相关内容,阅读专题下面的文章了解更多内容。

3

2025.12.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 1.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号