ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript对象及初识面向对象

2019-06-10 14:52:42  阅读:179  来源: 互联网

标签:name person 对象 age JavaScript 面向对象 初识 var


JavaScript 对象

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...

此外,JavaScript 允许自定义对象。

所有事物都是对象

JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

  • 布尔型可以是一个对象。
  • 数字型可以是一个对象。
  • 字符串也可以是一个对象
  • 日期是一个对象
  • 数学和正则表达式也是对象
  • 数组是一个对象
  • 甚至函数也可以是对象

JavaScript 对象

对象只是一种特殊的数据。对象拥有属性方法

访问对象的属性

属性是与对象相关的值。

访问对象属性的语法是:

objectName.propertyName
这个例子使用了 String 对象的 length 属性来获得字符串的长度:

var message="Hello World!";
var x=message.length;
在以上代码执行后,x 的值将是:

12

  

 

 

访问对象的方法

方法是能够在对象上执行的动作。

您可以通过以下语法来调用方法:

objectName.methodName()
这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写:

var message="Hello world!";
var x=message.toUpperCase();
在以上代码执行后,x 的值将是:

HELLO WORLD!

  

 

 

创建 JavaScript 对象

通过 JavaScript,您能够定义并创建自己的对象。

创建新对象有两种不同的方法:

  • 定义并创建对象的实例
  • 使用函数来定义对象,然后创建新的对象实例

创建直接的实例

这个例子创建了对象的一个新实例,并向其添加了四个属性:

实例
person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";


替代语法(使用对象 literals):

实例
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

  



 

使用对象构造器

本例使用函数来构造对象:

实例
function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; }

在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)

  

创建 JavaScript 对象实例

一旦您有了对象构造器,就可以创建新的对象实例,就像这样:

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");

  

 

把属性添加到 JavaScript 对象

您可以通过为对象赋值,向已有对象添加新属性:

假设 personObj 已存在 - 您可以为其添加这些新属性:firstname、lastname、age 以及 eyecolor:

person.firstname="John";
person.lastname="Doe";
person.age=30;
person.eyecolor="blue";

x=person.firstname;
在以上代码执行后,x 的值将是:

John

  

 

 

把方法添加到 JavaScript 对象

方法只不过是附加在对象上的函数。

在构造器函数内部定义对象的方法:

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;

    this.changeName=changeName;
    function changeName(name)
    {
        this.lastname=name;
    }
}

  

changeName() 函数 name 的值赋给 person 的 lastname 属性。

JavaScript 类

JavaScript 是面向对象的语言,但 JavaScript 不使用类。

在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。

JavaScript 基于 prototype,而不是基于类的。

JavaScript for...in 循环

JavaScript for...in 语句循环遍历对象的属性。

语法
for (variable in object)
{
    执行的代码……
}

  

注意: for...in 循环中的代码块将针对每个属性执行一次。

实例

循环遍历对象的属性:

实例

var person={fname:"John",lname:"Doe",age:25}; for (x in person) { txt=txt + person[x]; }

  

一些练习:

 

使用继承:

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用继承</title>
<script type="text/javascript">
window.onload=function(){                                                                                                                                                                                                                                                                                                                                        
    function Animal(name,age,color)
    {
        this.name=name;
        this.age=age;
        this.color=color;
        
    }
    function Poultry(name,age,color,leg) {
        Animal.call(this,name,age,color);
        this.leg=leg;
        this.info=function()
        {
            var str = "我是一个"+this.color+"的"+this.name+",我已经"+this.age+"岁了,我有"+this.leg+"条腿";
               return str;
        }
    }
    var p1 = new Poultry("小狗狗", 1, "灰色", 4);
    var p2 = new Poultry("茶杯猫", 2, "白色", 4);
    var p3 = new Poultry("母鸡", 1, "红色", 3);
    document.getElementById("show").innerHTML=p1.info()+"<br/>"+p2.info()+"<br/>"+p3.info();
}
</script>
</head>
<body>
<div id="show"></div>
</body>
</html>

创建构造函数显示自我介绍:


<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>创建构造函数显示自我介绍</title> <script type="text/javascript"> window.onload=function(){ function Person(name,age,present) { this.name=name; this.age=age; this.present=present; this.intro=function() { var str="姓名:"+this.name+"<br/>年龄:"+this.age+"<br/>自我介绍:"+this.present; return str; } } var per=new Person("王小明",16, "我是高中一年级的学生,身高1.8,很帅,我喜欢学习语文和英语"); var per2=new Person("黄妞妞", 6, "我今年6岁了,非常可爱,马上就可以上小学了,就可能有好多好多小朋友") document.getElementById("pest").innerHTML=per.intro()+"<br/><br/>"+per2.intro(); } </script> </head> <body> <p id ="pest"></p> </body> </html>

 

 

 

 

标签:name,person,对象,age,JavaScript,面向对象,初识,var
来源: https://www.cnblogs.com/wishsaber/p/10997559.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有