欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > JavaScript >

JavaScript实现访问对象的属性(获取/设置属性值)

发布时间:2019-05-22  编辑:杨雨个人博客网站   点击:   

通过在JavaScript的中定义对象,可以像类一样实现封装,在本文中将给大家介绍如何编写代码来访问对象属性,下面我们来看具体的内容。

 

JavaScript的

我们先来看一下格式

(对象的实例名称)。(属性名称)

我们来看具体的示例

代码如下

<!DOCTYPE Html>
<HTML>
<HEAD>
<meta charset =“utf-8”/>
<TITLE> </ TITLE>
<script type =“text / javascript ”>
function product(){
      this.name =“LemonCandy”;
      this.price = 150;
      this.getInfo = function(){
      return this.name +“= \”+ this.price;
          }
        }
        window.onload = function onLoad(){
            target = document.getElementById(“output”);
            prod = new product();
            target.innerHTML =“name:”+ prod.name +“<br/>”;
            target.innerHTML + =“price:”+ prod.price +“<br/>”;
        }
  </ SCRIPT>
</ HEAD>
<BODY>
  <div id =“output”> </ div>
</ BODY>
</ HTML>

说明

function product(){
    this.name =“LemonCandy”;    
    this.price = 150;    
    this.getInfo = function(){      
    return this.name +“= \”+ this.price;
    }
  }

上面的代码是对象的定义,在这个例子中,我们实现了名称,价格属性和的getInfo()方法。

window.onload = function onLoad(){
      target = document.getElementById(“output”);
      prod = new product();
      prod.name =“LemonCandy2”;
      target.innerHTML =“name:”+ prod.name +“<br/>”;
      target.innerHTML + =“price:”+ prod.price +“<br/>”;
  }

加载页面时,执行上面的代码。

prod = new product();

创建对象的实例。

prod.name =“LemonCandy2”;

(对象的实例名称)。(属性名称)用于访问对象的属性。要为属性设置值,需要通过替换设置属性值

 target.innerHTML =“name:”+ prod.name +“<br/>”;
      target.innerHTML + =“price:”+ prod.price +“<br/>”;

(对象的实例名称)。(属性名称)用于访问对象的属性。属性的值显示在页面上。

运行结果

当网页浏览器显示上述HTML文件时,将显示如下所示的效果。可以确认设定的属性值和从属性中获取值。

JavaScript的

接下来我们再来看一个例子

代码如下

<!DOCTYPE Html>
<HTML>
<HEAD>
<meta charset =“utf-8”/>
<TITLE> </ TITLE>
<script type =“text / javascript”>
var obj = {
      名称:“LemonCandy”,
      价格:150,
      getInfo:function(){
        return this.name +“= \”+ this.price;
      }
    }
    window.onload = function onLoad(){
      target = document.getElementById(“output”);
      obj.name =“LemonCandy2”;
      obj.price = 220;
      target.innerHTML =“name:”+ obj.name +“<br/>”;
      target.innerHTML + =“price:”+ obj.price +“<br/>”;
    }
  </ SCRIPT>
</ HEAD>
<BODY>
<div id =“output”> </ div>
</ BODY>
</ HTML>

说明

var obj = {
    名称:“LemonCandy”,    
    价格:150,    
    getInfo:function(){
          return this.name +“= \”+ this.price;
    }
  }

上面的代码是对象的定义。在这个例子中,我们实现了名称,价格属性和的getInfo()方法。它是以简单的格式编写的。

window.onload = function onLoad(){
    target = document.getElementById(“output”);
    obj.name =“LemonCandy2”;
    obj.price = 220;
    target.innerHTML =“name:”+ obj.name +“<br/>”;
    target.innerHTML + =“price:”+ obj.price +“<br/>”;
  }

加载页面时,执行上面的代码。代码与例1中的代码相同,处理内容相同。因为使用的是简单的类型的对象定义的格式,不存在由新的命令创建一个实例部分这与例1中的代码不同。

运行结果

当网页浏览器显示上述HTML文件时,将显示如下所示的效果,确认可以将值设置为属性并从属性中获取值。

JavaScript的

本文地址:http://itbyc.com/web/javascript/20848.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1