首页 > 编程语言 >JavaScript 对象构造器

JavaScript 对象构造器

时间:2024-08-27 15:50:29浏览次数:13  
标签:对象 age JavaScript 构造 Person var new myFriend

<!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 逻辑这一章中学习为何不应该把逻辑值创建为对象。

标签:对象,age,JavaScript,构造,Person,var,new,myFriend
From: https://blog.csdn.net/2301_78133614/article/details/141570043

相关文章

  • TPAMI 2024 | FarSeg++:面向高空间分辨率遥感图像中地理空间对象分割的前景感知关系网
    题目:FarSeg++:Foreground-AwareRelationNetworkforGeospatialObjectSegmentationinHighSpatialResolutionRemoteSensingImageryFarSeg++:面向高空间分辨率遥感图像中地理空间对象分割的前景感知关系网络作者:ZhuoZheng;YanfeiZhong;JunjueWang;AilongM......
  • JavaScript简介
    一、JavaScript简介1.什么是JavaScript?JavaScript简称为JS,由网景公司开发的客户端脚本语言,不需要编译,可以直接运行Web前端三层:结构层 HTML 定义页面的结构样式层 CSS 定义页面的样式行为层 JavaScript 用来实现交互,提升用户体验2.JavaScript作用在客户端动......
  • Android开发 - LayoutInflater 类将 XML 布局文件转换成对应的 View 对象解析
    LayoutInflater是什么LayoutInflater用于将XML布局文件转换成对应的View对象。它可以理解为一个“布局解析器”,帮助我们将静态的XML文件转换为可以动态操作的Java对象(View及其子类)LayoutInflater的主要作用在Android开发中,我们通常会在res/layout文件夹中......
  • JavaScript 的事件循环、宏任务、微任务
    JavaScrtipt执行顺序首先,必须要明确,在JavaScript中,所有任务都在主线程上执行。任务执行过程分为同步任务和异步任务两个阶段。异步任务的处理经历两个主要阶段:EventTable(事件表)和EventQueue(事件队列)。EventTable存储了宏任务的相关信息,包括事件监听和相应的回调函数。当特定......
  • javascript怎么实现链表?
    在JavaScript中实现链表通常涉及定义一个链表节点类(通常称为ListNode)和一个链表类(例如LinkedList),然后在这个链表类中实现各种操作链表的方法,如添加节点、删除节点、遍历链表等。以下是使用JavaScript实现单向链表的一个基本示例:链表节点类(ListNode)首先,我们定义一个链表节点......
  • 商城项目搜索展示页基于后端构造用户搜索的面包屑信息-----商城项目
    packagecom.alatus.search.vo;importlombok.Data;@DatapublicclassAttrResponseVo{//分类名字privateStringcatelogName;//分组的名字privateStringgroupName;//菜单路径privateLong[]catelogPath;/***......
  • AI成身高真相探测器,误差仅2厘米,网恋对象无处遁形
    &nbsp;“你是否想过,AI能成为你相亲时的身高测量师呢?”在约会软件上,相亲对象谎报身高的现象并不罕见。但随着AI技术的进步,这一“古老”的问题似乎找到了解决之道。“我的眼睛就是尺”如今AI模型被发现能够准确估计照片中人物的真实身高,误差仅在1英寸(约2.54厘米)以内。......
  • 【JavaScript】String常用方法
    String的常用方法长度s.length拼接字符串s.concat('内容','可拼接多个'),或者使用+号链接符,返回一个新字符串位置查找字符串方法;返回字符​查找某位置上的字符s.charAt(下标)返回该下标位置上的字符,未找到返回空白​返回某位置上的字符s[下标](只读,不能赋值),不支......
  • C++面向对象三大特性之一(继承)
    面向对象思维是编程中很重要的一个思维,众所周知面向对象编程有三大特性封装、继承、多态,今天我就来分享一下三大特性之一的继承。一、什么是继承?我们举例说明,比如你老爸的财产你可以使用,这就是继承,在面向对象中,体现为一个子类可以使用父类的成员属性和成员函数,自己不用在......
  • JavaScript 对象访问器
    JavaScript访问器(Getter和Setter)Getter和Setter允许您定义对象访问器(被计算的属性)。<!DOCTYPEhtml><htmllang="en"><body><pid="demo"></p><script>constperson={nama:"DianDi......