您的位置：首页 > 职场人生

讲给后台程序员看的前端系列教程(34)——对象

2019-09-10 22:44 1251 查看

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

在看到"对象"这两个字的时候，很多人会立马会联想到Java中的类、对象、继承、封装、多态…打住，打住，不要继续往下想了。在这或许要抛弃一下我们的惯性思维了。JavaScript并不是完全纯粹的面向对象，或者说它和大家熟知的Java中的面向对象不完全一样。在JavaScript中所有东西，比如：字符串、数字、数组、日期、甚至函数都是对象。

对象概述

在此，我们先来对JavaScript中的对象做一个基本的了解，例如：对象的创建、访问成员对象、遍历对象的成员等等。

对象的创建

在JavaScript中，对象的定义是通过大括号{ }实现的，对象的成员以键值对的形式存放在大括号{ }中，各成员之间使用逗号分隔。

示例如下：

<script type="text/javascript">
//定义空对象
var object1={};
//定义含有name属性的对象
var object2={name:"tom"};
//定义含有name,age,gender属性的对象
var object3={name:"lucy",age:21,gender:"female"};
</script>

除此以外，我们可将创建对象的过程封装成函数，通过调用函数来创建对象。

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
<head>
<meta charset="utf-8">
<title>对象</title>
</head>
<body>
<script type="text/javascript">
function factory(name,age){
var obj={};
obj.name=name;
obj.age=age;
return obj;
}
var obj1=factory("tom",18);
var obj2=factory("lucy",19);
console.log(obj1.name+" "+obj1.age);
console.log(obj2.name+" "+obj2.age);
</script>
</body>
</html>

我们将专门用于创建对象的factory( )函数称为工厂函数，在工厂函数内部通过大括号{ }的方式创建对象。

结果如下：

访问对象的成员

在创建对象后，通过

可以访问对象的成员。JavaScript中的对象具有动态特征，假若一个对象没有成员，那么用户可以手动赋值属性或方法来添加成员。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象</title>
</head>
<body>
<script type="text/javascript">
//定义空对象
var obj={};
//为对象添加属性
obj.name="tom";
//为对象添加方法
obj.introduce=function(){
alert("My name is "+this.name);
}
var name=obj.name;
document.write("name="+name);
obj.introduce();
</script>
</body>
</html>

结果如下：

另外，由于JavaScript允许在代码执行时动态的给对象增加成员，因此可将用户输入的内容添加到对象的成员中。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象</title>
</head>
<body>
<input id="k" type="text" value="name">
<input id="v" type="text" value="tom">
<input id="btn" type="button" value="Click Me">
<script type="text/javascript">
var k = document.getElementById('k');
var v = document.getElementById('v');
var btn = document.getElementById('btn');
var obj = {};
btn.onclick = function() {
obj[k.value] = v.value;
// 输出结果：tom
console.log(obj.name);
};
</script>
</body>
</html>

遍历对象的成员

for…in语法不仅可以遍历数组元素，还可遍历对象的成员。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象</title>
</head>
<body>
<script type="text/javascript">
var obj={name:"lucy",age:21,gender:"female"};
for(var k in obj){
console.log(k+":"+obj[k]);
}
</script>
</body>
</html>

结果如下：

判断对象成员是否存在

可使用in运算符判断一个对象中的某个成员是否存在。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象</title>
</head>
<body>
<script type="text/javascript">
var obj={name:"lucy",age:21,gender:"female"};
console.log("name" in obj);
console.log("age" in obj);
console.log("gender" in obj);
console.log("city" in obj);
</script>
</body>
</html>

结果如下：

构造函数

我们之前虽然可以通过大括号{ }创建对象，但是无法区分对象的类型。为了明确区分对象的类型，我们可以使用构造函数创建对象。

JavaScript内置构造函数

JavaScript提供了 Object、String、Number等构造函数，我们可通过

new 构造函数名( )

的方式创建对象。习惯上将使用new关键字创建对象的过程称为实例化，实例化后得到的对象称为构造函数的实例。

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
<head>
<meta charset="utf-8">
<title>内置构造函数</title>
</head>
<body>
<script type="text/javascript">
var obj=new Object();
var str=new String("hello");
//查看对象由哪个构造函数生成
console.log(obj.constructor);
console.log(str.constructor);
</script>
</body>
</html>

结果如下：

自定义构造函数

除了直接使用JavaScript内置构造函数，我们也可以根据自身需要自定义构造函数，在定义时应请注意以下事项。

构造函数的命名推荐采用帕斯卡命名规则，即所有的单词首字母大写。
请勿使用JavaScript保留字或者关键词为构造函数命名。
在构造函数内部，使用this来表示刚刚创建的对象。

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
<head>
<meta charset="utf-8">
<title>自定义构造函数</title>
</head>
<body>
<script type="text/javascript">
//构造函数
function Student(name,age){
this.name=name;
this.age=age;
this.sayHello=function (){
console.log("hi,My name is "+this.name+",I am "+this.age);
};
}
//创建对象
var stu1=new Student("tom",20);
var stu2=new Student("jak",21);
console.log(stu1);
console.log(stu2);
stu1.sayHello();
stu2.sayHello();
console.log(stu1.constructor);
console.log(stu2.constructor);
</script>
</body>
</html>

结果如下：

在该示例中，我们自定义构造函数并使用构造函数创建对象。

在构造函数中，使用var关键字定义的变量称为私有成员。在后续的操作中，无法通过对象.成员的方式对私有成员进行访问，但是可通过对象的成员方法访问对象的私有对象。

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
<head>
<meta charset="utf-8">
<title>自定义构造函数</title>
</head>
<body>
<script type="text/javascript">
//构造函数
function Student(name,age){
var country="China";
this.name=name;
this.age=age;
this.sayHello=function (){
console.log("hi,My name is "+this.name+",I am "+this.age);
};
this.getCountry=function(){
return country;
}
}
//创建对象
var stu=new Student("tom",20);
console.log(stu.name);
console.log(stu.age);
console.log(stu.getCountry());
//error code
console.log(stu.country);
</script>
</body>
</html>

结果如下：

在该示例中：country是私有成员无法通过对象.成员的方式对其进行访问。所以，在构造函数中暴露了getCountry( )方法供外界访问country。

ES6增加了class关键字用来定义一个类。但是从本质上来讲，class不过是是语法糖罢了，并非JavaScript的原生精髓。

内置对象

JavaScript提供了很多常用的内置对象，包括与字符串相关的String对象、与数值相关的Number对象、与数学相关的Math对象、与日期相关的Date对象，以及与数组相关的Array对象等。在之前的博客中我们已近介绍了关于Array对象的使用，接下来将对其它几个常用内置对象进行详细讲解。

Date

Date常用方法如下：

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
<head>
<meta charset="utf-8">
<title>Date</title>
</head>
<body>
<script type="text/javascript">
var date = new Date();
document.write("Date()=" + Date() + "<br>");
document.write("getFullYear()=" + date.getFullYear() + "<br>");
document.write("getMonth()=" + date.getMonth() + "<br>");
document.write("getDate()=" + date.getDate() + "<br>");
document.write("getHours()=" + date.getHours() + "<br>");
document.write("getMinutes()=" + date.getMinutes() + "<br>");
document.write("getSeconds()=" + date.getSeconds() + "<br>");
</script>
</body>
</html>

结果如下：

Math

Math常用属性如下：

Math常用方法如下：

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
<head>
<meta charset="utf-8">
<title>Math</title>
</head>
<body>
<script type="text/javascript">
var num1 = 3.14;
var num2 = 9.527;
var num3 = Math.max(88, 99);
var num4 = Math.random();
var num5 = Math.pow(3, 4);
var num6 = Math.round(65.23);
document.write("Math.ceil(" + num1 + ")=" + Math.ceil(num1) + "<br>");
document.write("Math.floor(" + num2 + ")=" + Math.floor(num2) + "<br>");
document.write("Math.max(88,99)=" + Math.floor(num3) + "<br>");
document.write("Math.random()=" + num4 + "<br>");
document.write("Math.round(62.73)=" + num6 + "<br>");
</script>
</body>
</html>

结果如下：

String

String常用属性如下：

String常用方法如下：

示例如下：

<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html>
<head>
<meta charset="utf-8">
<title>String</title>
</head>
<body>
<script type="text/javascript">
//var words="abcdefg";
var words = new String("abcdefg");
var index = words.indexOf("b");
document.writeln("index=" + index + "<br>");
var subString = words.substring(2, 4);
document.writeln("subString=" + subString + "<br>");
var upperString = words.toUpperCase(words);
document.writeln("upperString=" + upperString + "<br>");
</script>
</body>
</html>

结果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航