Everything is an object in JavaScript: strings, numbers, arrays, functions ...
In addition, JavaScript allows custom objects.
Everything is objects
JavaScript provides multiple built-in objects, such as String, Date, Array, and so on. Only special data type object with attributes and methods.
- Boolean can be an object.
- Digital type can be an object.
- String can be an object
- Date is a target
- Mathematics and regular expressions are objects
- An array is an object
- Even function may also be subject
JavaScript objects
Object is just a special kind of data. Objects have properties and methods .
Property access objects
|
1
2
3
4
5
6
7
8
9
10
11
12
|
属性是与对象相关的值。
访问对象属性的语法是：
objectName.propertyName
这个例子使用了 String 对象的 length 属性来获得字符串的长度：
var message="Hello World!";
var x=message.length;
在以上代码执行后，x 的值将是：
12
|
Access object methods
|
1
2
3
4
5
6
7
8
9
10
11
12
|
方法是能够在对象上执行的动作。
您可以通过以下语法来调用方法：
objectName.methodName()
这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写：
var message="Hello world!";
var x=message.toUpperCase();
在以上代码执行后，x 的值将是：
HELLO WORLD!
|
Create a JavaScript object
By JavaScript, you can define and create your own objects.
Create a new object has two different ways:
- Define and create an instance of an object
- Use function to define the object, and then create a new object instance
Create a direct instance
This example creates a new instance of the object, and add four properties:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
实例
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"};
|
Use object constructor
This example uses the function to construct objects:
|
1
2
3
4
|
实例
function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; }
在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）
|
Create a JavaScript object instance
Once you have the object constructor, you can create a new object instance, like this:
|
1
2
|
var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");
|
To add properties to a JavaScript object
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
您可以通过为对象赋值，向已有对象添加新属性：
假设 personObj 已存在 - 您可以为其添加这些新属性：firstname、lastname、age 以及 eyecolor：
person.firstname="John";
person.lastname="Doe";
person.age=30;
person.eyecolor="blue";
x=person.firstname;
在以上代码执行后，x 的值将是：
John
|
To add a method to JavaScript objects
The method is simply attached to the object's function.
In the method defined inside the constructor function object:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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;
}
}
|
() Function value of the name attribute lastname changeName assigned to person.
JavaScript classes
JavaScript is an object-oriented language, but do not use JavaScript classes.
In JavaScript, the class is not created, it will not create an object (as in other object-oriented languages) by the class.
JavaScript-based prototype, rather than class-based.
JavaScript for ... in loop
|
1
2
3
4
5
6
7
|
JavaScript for...in 语句循环遍历对象的属性。
语法
for (variable in object)
{
执行的代码……
}
|
Note: for ... in loop code block will be executed once for each property.
Examples
Loop through the properties of an object:
Examples
|
1
|
var person={fname:"John",lname:"Doe",age:25}; for (x in person) { txt=txt + person[x]; }
|
Some exercises:
Using inheritance:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<Title> Using inheritance </ 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>