JavaScript 对象构造器

于 2024-08-27 00:00:00 发布
阅读量690 收藏 12
点赞数 13
分类专栏： js 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78133614/article/details/141570043
版权 
<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        function Person(first, last, age, like) {
            this.firstName = first;
            this.lastName = last;
            this.age = age;
            this.likeColoe = like;
        }
        var myFriend = new Person("Rose", "li", 20, "pick");
        document.getElementById("demo").innerHTML =
            "My friend " + myFriend.firstName + " is " + myFriend.age + "."; 
    </script>

</body>
//My friend Rose is 20.

用大写首字母对构造器函数命名是个好习惯。

对象类型（蓝图）（类）

前一章的实例是有限制的。它们只创建单一对象。

有时我们需要创建相同“类型”的许多对象的“蓝图”。

创建一种“对象类型”的方法，是使用对象构造器函数。

在上面的例子中，函数 Person() 就是对象构造器函数。

通过 new 关键词调用构造器函数可以创建相同类型的对象：

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        function Person(first, last, age, like) {
            this.firstName = first;
            this.lastName = last;
            this.age = age;
            this.likeColoe = like;
        }
        var myFriend = new Person("Rose", "li", 20, "pick");
        var mySister = new Person("jisso", "Tina", 15, "blue");
        document.getElementById("demo").innerHTML =
            "My friend is " + myFriend.age + ". My mySister is " + mySister.age + ".";

    </script>

</body>
//My friend is 20. My mySister is 15.

this 关键词

在 JavaScript 中，被称为 this 的事物是代码的“拥有者”。

this 的值，在对象中使用时，就是对象本身。

在构造器函数中，this 是没有值的。它是新对象的替代物。 当一个新对象被创建时，this 的值会成为这个新对象。

请注意 this 并不是变量。它是关键词。您无法改变 this 的值。

为对象添加属性

为已有的对象添加新属性很简单：

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        function Person(first, last, age, like) {
            this.firstName = first;
            this.lastName = last;
            this.age = age;
            this.likeColoe = like;
        }
        //创建两个person对象
        var myFriend = new Person("Rose", "li", 20, "pick");
        var mySister = new Person("jisso", "Tina", 15, "blue");
        //为第一个对象添加国籍
        myFriend.nationality = "China";
        // 显示国籍
        document.getElementById("demo").innerHTML =
            "My friend is " + myFriend.nationality;

    </script>

</body>
//My friend is China

为对象添加方法

为已有的对象添加新方法很简单：

实例

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        function Person(first, last, age, like) {
            this.firstName = first;
            this.lastName = last;
            this.age = age;
            this.likeColoe = like;
        }
        //创建两个person对象
        var myFriend = new Person("Rose", "li", 20, "pick");
        var mySister = new Person("jisso", "Tina", 15, "blue");
        //为第一个对象添加国籍
        myFriend.name = function () {
            return this.firstName + " " + this.lastName;
        }
        // 显示国籍
        document.getElementById("demo").innerHTML =
            "My friend is " + myFriend.name();

    </script>

</body>
//My friend is Rose li

新方法被添加到 myFather。不是 myMother，也不是任何其他 person 对象。

为构造器添加属性

与向已有对象添加新属性不同，您无法为对象构造器添加新属性：

实例

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        function Person(first, last, age, like) {
            this.firstName = first;
            this.lastName = last;
            this.age = age;
            this.likeColoe = like;
        }
        //创建两个person对象
        var myFriend = new Person("Rose", "li", 20, "pick");
        var mySister = new Person("jisso", "Tina", 15, "blue");
        //您不能将属性添加到构造天数
        Person.nationality = "China";
        // 显示国籍
        document.getElementById("demo").innerHTML =
            "The nationality of my friend is " + myFriend.nationality;

    </script>

</body>
//The nationality of my friend is undefined

为构造器添加方法

您的构造器函数也可以定义方法：

实例

<!DOCTYPE html>
<html>

<body>

    <p id="demo"></p>

    <script>

        // Person 对象的构造器函数
        function Person(first, last, age, eye) {
            this.firstName = first;
            this.lastName = last;
            this.age = age;
            this.eyeColor = eye;
            this.name = function () {
                return this.firstName + " " + this.lastName
            };
        }

        // 创建 Person 对象
        var myFriend = new Person("Bill", "Gates", 62, "blue");

        // 显示全名
        document.getElementById("demo").innerHTML =
            "My friend is " + myFriend.name();

    </script>

</body>

</html>
//My friend is Bill Gates

与向已有对象添加新方法不同，您无法为对象构造器添加新方法。

必须在构造器函数内部向一个对象添加方法

<!DOCTYPE html>
<html>

<body>

    <p id="demo"></p>

    <script>
        // Person 对象的构造器函数
        function Person(firstName, lastName, age, eyeColor) {
            this.firstName = firstName;
            this.lastName = lastName;
            this.age = age;
            this.eyeColor = eyeColor;
            this.changeName = function (name) {
                this.lastName = name;
            }
        }
        // 创建 Person 对象
        var myFriend = new Person("Bill", "Gates", 62, "green");

        // 修改姓氏
        myFriend.changeName("Jobs");

        // 显示姓氏
        document.getElementById("demo").innerHTML =
            "My friend's last name is " + myFriend.lastName;
    </script>

</body>

</html>
//My friend's last name is Jobs

内建 JavaScript 构造器

JavaScript 提供用于原始对象的构造器：

实例

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        var a1 = new Object(); // 新的 Object 对象
        var a2 = new Object(); // 新的 Object 对象
        var a3 = new Number(); // 新的 Number 对象
        var a4 = new Boolean(); // 新的 Boolean 对象
        var a5 = new Array(); // 新的 Array 对象
        var a6 = new RegExp();   // 新的 RegExp 对象
        var a7 = new Function(); // 新的 Function 对象
        var a8 = new Date();   // 新的 Date 对象
        // 显示国籍
        document.getElementById("demo").innerHTML =
            "a1: " + typeof x1 + "<br>" +
            "a2: " + typeof x2 + "<br>" +
            "a3: " + typeof x3 + "<br>" +
            "a4: " + typeof x4 + "<br>" +
            "a5: " + typeof x5 + "<br>" +
            "a6: " + typeof x6 + "<br>" +
            "a7: " + typeof x7 + "<br>" +
            "a8: " + typeof x8 + "<br>";

    </script>

</body>
<!-- 
a1: undefined
a2: undefined
a3: undefined
a4: undefined
a5: undefined
a6: undefined
a7: undefined
a8: undefined
 -->

Math() 对象不再此列。Math 是全局对象。new 关键词不可用于 Math。

您知道吗？

正如以上所见，JavaScript 提供原始数据类型字符串、数字和布尔的对象版本。但是并无理由创建复杂的对象。原始值快得多！

请使用对象字面量 {} 代替 new Object()。

请使用字符串字面量 "" 代替 new String()。

请使用数值字面量代替 Number()。

请使用布尔字面量代替 new Boolean()。

请使用数组字面量 [] 代替 new Array()。

请使用模式字面量代替 new RexExp()。

请使用函数表达式 () {} 代替 new Function()。

实例

<!DOCTYPE html>
<html>

<body>

    <p id="demo"></p>

    <script>
        var x1 = {};    // 对象
        var x2 = "";    // 字符串 
        var x3 = 0;     // 数字
        var x4 = false;   // 布尔
        var x5 = [];    // 对象（非数组）
        var x6 = /()/;    // 对象
        var x7 = function () { };  // 函数

        // 显示所有类型
        document.getElementById("demo").innerHTML =
            "x1: " + typeof x1 + "<br>" +
            "x2: " + typeof x2 + "<br>" +
            "x3: " + typeof x3 + "<br>" +
            "x4: " + typeof x4 + "<br>" +
            "x5: " + typeof x5 + "<br>" +
            "x6: " + typeof x6 + "<br>" +
            "x7: " + typeof x7 + "<br>";
    </script>

</body>

</html>
<!-- 
x1: object
x2: string
x3: number
x4: boolean
x5: object
x6: object
x7: function 
-->

字符串对象

通常，字符串被创建为原始值：var firstName = "Bill"

但是也可以使用 new 关键词创建字符串对象：var firstName = new String("Bill")

请在 JS 字符串这一章中学习为何不应该把字符串创建为对象。

数字对象

通常，数值被创建为原始值：var x = 456

但是也可以使用 new 关键词创建数字对象：var x = new Number(456)

请在 JS 数字这一章中学习为何不应该把数值创建为对象。

布尔对象

通常，逻辑值被创建为原始值：var x = false

但是也可以使用 new 关键词创建逻辑对象：var x = new Boolean(false)

请在 JS 逻辑这一章中学习为何不应该把逻辑值创建为对象。

软件技术NINI
关注
专栏目录
js-构造器
weixin_47775987的博客
03-04 1807
构造器 用来给对象赋初始值，构造器是一种特殊的函数，如果不写，js会自动分配默认无参构造器 例如： function Emp(name,age){ this.name=name//赋上你给我传的这个值 this.age=age this.say=function(){ console.log(this.name,th...
JavaScript中使用构造器创建对象无需new的情况说明
10-28
然而，在一些特定的场景下，创建对象时可以不使用new操作符，这一点在某些库代码或者特定的内置对象构造器中可以观察到。通过分析这些情况，我们可以对JavaScript中构造器函数的使用有更深刻的理解。 首先，需要...
JavaScript中的对象与构造器
圣彼得堡之光的专栏
04-23 644
一、对象从何而来 首先来看什么是对象，搜索wiki百科可以得到解释，在面向对象(Object Oriented) 的软件中，对象(Object)是某一个类(Class)的实例(Instance) ，因此说有对象之前必须先有类型，然后再将类型实例化就得到了对象。 那么在JavaScript中，类型不是通过如java的声明的方式定义，而是通过function的方式获得的，如 1:
js对象构造器
Pure_White520的博客
06-17 223
js对象构造器
JavaScript构造器理解
weixin_34234721的博客
04-23 97
类 Class 类的概念应该是面向对象语言的一个特色，但是JavaScript并不像Java，C++等高级语言那样拥有正式的类，而是多数通过构造器以及原型方式来仿造实现。在讨论构造器和原型方法前，我可以看看一种叫做工厂方式的仿造方法。 工厂模式 <script> function material() { ...
JS的对象及构造函数
Raccon_的博客
12-02 843
对象 创建对象 1.利用字面量创建对象 var obj={}; 2.利用new Object创建对象 var obj=new Object(); 3.利用构造函数创建函数 对象属性 里面的属性或方法采用键值对的形式 键 属性名：值 属性值 多个属性或者方法中间用逗号隔开 方法冒号后面跟的是一个匿名函数 使用对象 console.log(obj.name); 或 console.log(obj['age']); 调用方法 obj.a(); ...
JavaScript对象创建模式实例汇总
10-21
主要介绍了JavaScript对象创建模式,结合实例形式总结分析了JavaScript常见的对象创建模式,包括工厂模式、构造函数模式、原型模式、动态原型模式、寄生构造函数模式、稳妥构造函数模式等,需要的朋友可以参考下
详解JavaScript中的构造器Constructor模式
10-22
JavaScript中的构造器Constructor模式是创建对象的一种方式，尤其在JavaScript这种不支持传统的类继承的语言中，构造器扮演着至关重要的角色。构造器主要用于初始化新创建的对象，设置它们的属性和方法。然而，构造...
JavaScript中利用构造器函数模拟类的方法
12-03
在JavaScript中，构造器函数是一种特殊类型的函数，用于创建和初始化对象。它们是模拟面向对象编程中的类的关键机制，因为在JavaScript这种基于原型的语言中，并没有真正的类。构造器函数允许开发者定义可重用的模板...
js对象构造函数用法
qq_15941409的博客
01-29 307
//原理要点，Function也是一个对象 $(function () { var Person = function (name) { this.name = name; //唱歌 this.singSong = function () {//这种方式会在每次实例化的时候在内存中划分一块新的空...
javascript构造器属性
likaixuan1998的博客
10-09 1297
当我们创建对象时，实际上也同时赋予了该对象构造器属性 constructor，该属性指向用于创建该对象的构造函数的引用 声明一个构造函数 //声明一个构造函数 构造函数首字母应大写 function Obj(name){ this.name=name; this.fun=function(){ alert(this.name); } } 用Obj构造函数创建一
JavaScript-构造方法
最新发布
__猫玖__的博客
11-22 100
构造器是一个普通的 JavaScript 函数，但用于创建和初始化对象。构造器的名称通常以大写字母开头，这是一种常见的命名约定。构造器和new操作符是 JavaScript 中用于创建对象实例的重要机制。了解它们的使用方式和原理有助于理解面向对象编程的概念。在实际开发中，构造器经常用于创建和初始化对象，通过原型链，它们可以共享方法和属性，提高代码的可维护性。希望这些例子和解释能够帮助你更好地理解 JavaScript 中的构造器和new操作符。
JavaScript获取构造器的方法
dancheng1的博客
08-17 708
构造器：使用什么元素实例化的对象，元素就称为该对象的构造器   对象.constructor;  //获得构造器 function Animal() { //设置默认成员 this.name = "dd"; this.age = 6; this.run = function () { conso
《JavaScript 核心原理解析》学习笔记 Day 14 new 构造器
Alloom的博客
01-29 1329
最早的 JavaScript 没有继承。JavaScript 1.0 中可以将函数作为构造器，并且在函数中向它的实例（也就是 this 对象）抄写类声明的那些属性。构造器函数即为类，而被创建出来的实例即为对象。JavaScript 一方面使用了类继承的基础结构和概念，另一方面又要实现原型继承和基于原型链检查的逻辑。instanceof 运算被实现为一个动态地访问原型链的过程，它将从对象所属类的 prototype 属性逆向地在原型链中查找指定的原型，因此能确定某个对象是否是某个类本身或其子类的实例。
js中用构造器创建对象与字面量创建对象的区别
明天回火星
05-25 1023
http://m.blog.csdn.NET/blog/z1547840014/9734179     当用new操作符调用一个函数时,就会创建一个新的JavaScript对象.接着,该函数会作为该新建对象的this值被调用,而在原始调用中所使用的参数也都将一并传递给该函数调用                  下面我们来研究下使用构造器处创建对象和使用字面量创建对象的区别到底是什么,先
JS 基础 —— Function 构造器及其对象、方法
永远的北极光
10-18 7885
一、基础 Function 是一个构造器，能创建Function对象，即JavaScript中每个函数实际上都是Function 对象。 构造方法： new Function ([arg1[, arg2[, ...argN]],] functionBody)说明： arg1、arg2等为构造器的参数，functionBody为方法体。注意：参数必须用引号包围！ 实例： var plus
JavaScript 构造器（constructor）介绍
hongweigg的专栏
07-25 3463
JavaScript构造器（constructor）是对象的一个属性，为只读 ，主要用途有： 1、可以用来判断某对象是否由某个函数（类）实例化得来； constructor var ClassA = function(){ this.name = "Zhangsan"; var age = 40; } ClassA.prototype.url =
JavaScript对象与数组深度解析
在这个例子中，`Animal`是构造器函数，`cat`是通过构造器函数实例化的新对象，`sound`是其属性。 接下来，我们转向数组。数组是一种特殊的对象，用于存储一系列有序的值。在JavaScript中，数组可以包含任意类型的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值