doina

一个小菜鸟运维工程师.

JavaScript 对象构造器

JS 对象构造器

https://www.w3school.com.cn/js/js_object_constructors.asp

this 关键词

在 JavaScript 中,被称为 this 的事物是代码的“拥有者”。
this 的值,在对象中使用时,就是对象本身。
在构造器函数中,this 是没有值的。它是新对象的替代物。 当一个新对象被创建时,this的值会成为这个新对象。
请注意 this 并不是变量。它是关键词。您无法改变 this 的值。

构造器使用

<!DOCTYPE html>
<html>
    <body>
        <h1>JavaScript 对象构造器</h1>

        <p id="demo1"></p>
        <p id="demo2"></p>
        <p id="demo3"></p>
        <p id="demo4"></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');

            // 显示年龄
            document.getElementById('demo1').innerHTML =
                'My friend is ' + myFriend.age + '. My brother is ' + myBrother.age + '.';

            // 为已有的对象添加新属性: 为第一个对象添加国籍
            myFriend.nationality = 'English';

            // 显示国籍
            document.getElementById('demo2').innerHTML =
                'My friend nationality is ' + myFriend.nationality;

            // 向第一个对象添加 name 方法
            myFriend.name = function () {
                return this.firstName + ' ' + this.lastName;
            };

            // 显示全名
            document.getElementById('demo3').innerHTML = 'My friend fullname is ' + myFriend.name();

        </script>
    </body>
</html>

构造器继承(原型继承)

所有 JavaScript 对象都从原型继承属性和方法。

日期对象继承自 Date.prototype。数组对象继承自 Array.prototype。Person 对象继承自 Person.prototype。

Object.prototype 位于原型继承链的顶端:

日期对象、数组对象和 Person 对象都继承自 Object.prototype。

使用 prototype, 向对象添加属性和方法

有时,您希望向所有给定类型的已有对象添加新属性(或方法)。

有时,您希望向对象构造器添加新属性(或方法)。

<!DOCTYPE html>
<html>
    <body>
        <h1>JavaScript 对象构造器</h1>

        <p id="demo1"></p>
        <p id="demo2"></p>
        <p id="demo3"></p>
        <p id="demo4"></p>
        <p id="demo5"></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');

              // 像构造器添加属性
            Person.prototype.sex = "man";
            document.getElementById('demo4').innerHTML = 'My friend sex is ' + myFriend.sex;

            // 像构造器添加方法
            Person.prototype.fullname = function() {
                return this.firstName + " " + this.lastName;
            };
            document.getElementById('demo5').innerHTML = 'My friend fullname is ' + myFriend.fullname();

        </script>
    </body>
</html>

点赞

发表评论

邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据