hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

深切进修JavaScript对象接见器(Getter和Setter)_WEB前端开发

2019-12-01后端开发ki4网21°c
A+ A-

JavaScript接见器(Getter和Setter),ECMAScript 5(2009)引见了Getter和Setters。 Getters和setter许可您定义对象接见器(Computed Properties)。

【相干课程引荐:JavaScript视频教程】

JavaScript Getter(get关键字)

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>js</title>
<body>

<h2>JavaScript Getters和Setters</h2>

<p> Getters和setter许可您经由过程要领猎取和设置属性。</p>

<p>此示例运用lang属性猎取言语属性的值。</p>

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

<script>
    // 新建一个对象。
    var person = {
        firstName: "John",
        lastName : "Doe",
        language : "en",
        get lang() {
            return this.language;
        }
    };
    // 运用getter显现来自对象的数据:
    document.getElementById("demo").innerHTML = person.lang;
</script>

</body>
</html>

JavaScript Setter (set关键字)

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Getters和Setters</title>
<body>

<h2> JavaScript Getters和Setters </h2>

<p> Getters和setter许可您经由过程要领猎取和设置属性。</p>

<p>此示例运用lang属性设置言语属性的值。</p>

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

<script>
    // Create an object:
    var person = {
        firstName: "John",
        lastName : "Doe",
        language : "NO",
        set lang(value) {
            this.language = value;
        }
    };
    // Set a property using set:
    person.lang = "en";
    // Display data from the object:
    document.getElementById("demo").innerHTML = person.language;
</script>

</body>
</html>

运用JavaScript函数照样Getter?

这两个例子之间有什么区别?

示例1:

var person = {
  firstName: "John",
  lastName : "Doe",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
// 运用要领显现对象的数据:
document.getElementById("demo").innerHTML = person.fullName();

示例2:

var person = {
  firstName: "John",
  lastName : "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// 运用getter显现来自对象的数据:
document.getElementById("demo").innerHTML = person.fullName;

示例1将fullName作为函数接见:person.fullName()。示例2将fullName作为属性接见:person.fullName。第二个示例供应了更简朴的语法。

数据质量

运用getter和setter时,JavaScript能够确保更好的数据质量。lang在此示例中,运用属性language以大写情势返回属性的值:

// 建立一个对象:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "en",
  get lang() {
    return this.language.toUpperCase();
  }
};
// 运用getter显现来自对象的数据:
document.getElementById("demo").innerHTML = person.lang;

lang在此示例中,运用该属性将大写值存储在language属性中:

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};
// 运用setter设置对象属性:
person.lang = "en";
// 显现来自对象的数据:
document.getElementById("demo").innerHTML = person.language;

为何运用Getter和Setter?

 ● 它供应了更简朴的语法

 ● 它许可属性和要领的语法雷同

 ● 它能够确保更好的数据质量

 ● 在幕后做事情很有效

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>js</title>
<body>

<h2> JavaScript Getters和Setters </h2>

<p>圆满的建立反对象:</p>

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

<script>
    var obj = {
        counter : 0,
        get reset() {
            this.counter = 0;
        },
        get increment() {
            this.counter++;
        },
        get decrement() {
            this.counter--;
        },
        set add(value) {
            this.counter += value;
        },
        set subtract(value) {
            this.counter -= value;
        }
    };
    // Play with the counter:
    obj.reset;
    obj.add = 5;
    obj.subtract = 1;
    obj.increment;
    obj.decrement;
    // Display the counter:
    document.getElementById("demo").innerHTML = obj.counter;
</script>

</body>
</html>

Object.defineProperty()

Object.defineProperty()要领还可用于增加Getters和Setter:

// 定义对象
var obj = {counter : 0};
// 定义 setters
Object.defineProperty(obj, "reset", {
  get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
  get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
  get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
  set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
  set : function (value) {this.counter -= value;}
});
// Play with the counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

浏览器支撑

Internet Explorer 8或更早版本不支撑Getters和Setter:

Internet Explorer Chrome FireFox Safari Opera

9.0+ 支撑 支撑 支撑 支撑

本文来自 js教程 栏目,迎接进修!

以上就是深切进修JavaScript对象接见器(Getter和Setter)的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
深切进修JavaScript对象接见器(Getter和Setter)_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
推荐阅读

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>