JavaScript学习(三) -- 对象构造器

最新推荐文章于 2024-05-20 15:49:25 发布

Bridge_go

最新推荐文章于 2024-05-20 15:49:25 发布

阅读量156

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/breakbridge/article/details/108997295

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.构造函数

什么是构造函数：在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。

它的作用：重复需要使用的属性当做构造函数的参数传递，可以减少大量的重复操作过程。

在使用时，若是new忘记使用，会产生严重的后果。会导致构造函数内部变量变为全局变量。避免的方法，在构造函数内部使用严格模式。当出现报错时，将会终止运行js。此时可以根据报错进行修改调试。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p id="demo"></p>
    <script>
        function Person(arg1, arg2)
        {
            //'use strict';  在开头处加上这个，就表示是严格模式
            this.firstName = arg1;
            this.lastName = arg2;
            this.fullName = function ()
            {
                return this.firstName + this.lastName;
            };
        }
        var x = Person("John", "Doe");
        document.getElementById("demo").innerHTML = firstName;   //输出：John

        //正确的调用：
        // var x = new Person("John","Doe");
        // document.getElementById("demo").innerHTML = x.firstName;   //输出：John
    </script>

</body>
</html>

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

2.this 关键词

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

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

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

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

PS：在构造函数中所有的属性和方法都要用 this 指代

3.为对象添加属性和方法

<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript 对象构造器</h1>
    <p id="demo"></p>

    <script>
        // Person 对象的构造器函数
        function Person(first, last, age, eye)
        {
            this.firstName = first;
            this.lastName = last;
            this.age = age;
            this.eyeColor = eye;
        }

        // 创建两个 Person 对象
        var myFriend = new Person("Bill", "Gates", 62, "blue");
        var myBrother = new Person("Steve", "Jobs", 56, "green");

        // 为第一个对象添加国籍
        myFriend.nationality = "English";   //注意：nationality 属性只有 myFriend这个对象有，myBrother 没有

        // 向第一个对象添加 name 方法
        myFriend.name = function ()
        {
            return this.firstName + " " + this.lastName;
        };  //同理，该方法也只有myFrient对象有

        // 显示国籍
        document.getElementById("demo").innerHTML = "My friend is " + myFriend.nationality;
    </script>

</body>
</html>

4.为构造器添加属性和方法

function Person(first, last, age, eyecolor)
{
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.nationality = "English";  //新加属性
    this.name = function() {return this.firstName + " " + this.lastName;};  //新加方法
}

PS：与向已有对象添加新方法不同，您无法为对象构造器添加新方法。必须在构造器函数内部向一个对象添加方法

5.内建 JavaScript 构造器

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

var x1 = new Object();    // 一个新的 Object 对象
var x2 = new String();    // 一个新的 String 对象
var x3 = new Number();    // 一个新的 Number 对象
var x4 = new Boolean();   // 一个新的 Boolean 对象
var x5 = new Array();     // 一个新的 Array 对象
var x6 = new RegExp();    // 一个新的 RegExp 对象
var x7 = new Function();  // 一个新的 Function 对象
var x8 = new Date();      // 一个新的 Date 对象

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

Bridge_go

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript学习(三) -- 对象构造器

1.构造函数什么是构造函数：在 JavaScript 中，用new关键字来调用的函数，称为构造函数。它的作用：重复需要使用的属性当做构造函数的参数传递，可以减少大量的重复操作过程。在使用时，若是new忘记使用，会产生严重的后果。会导致构造函数内部变量变为全局变量。避免的方法，在构造函数内部使用严格模式。当出现报错时，将会终止运行js。此时可以根据报错进行修改调试。<!DOCTYPE html><html><head><meta ch...
复制链接

扫一扫