男儿欲遂平生志,六经勤向窗前读。这篇文章主要讲述对象-JavaScript入门基础(016)相关的知识,希望能为你提供帮助。
【对象-JavaScript入门基础(016)】
面向对象编程是一种很重要的技术,有助于编写清晰可靠的、可以重复使用的代码。创建对象:可以直接创建空白对象
myObject = new Object();
此对象现在没有任何的属性和方法。
myObject.info = "给你一些信息";
这样对象就有一个info的属性。给对象添加方法:
function myFunc() {
alter(this.info);
}
myObject.showInfo = myFunc;
这样对象就有了方法,并且可以输出info属性的内容。this关键字:在函数最初声明时,它的父对象是全局对象window对象。当明确使用某个对象调用方法时,此时this指向的是调用方法的对象。创建对象的完整代码:
< !DOCTYPE html>
< html lang="en">
< head>
< meta charset="UTF-8">
< title> 创建对象< /title>
< script>
myObject = new Object();
myObject.info = "给你一些信息。";
function myFunc() {
alert(this.info);
}
myObject.showInfo = myFunc;
< /script>
< /head>
< body>
< input type="button" value="https://www.songbingjia.com/android/Good showInfo Call" onclick="myObject.showInfo()">
< input type="button" value="https://www.songbingjia.com/android/myFunc Call" onclick="myFunc()">
< input type="button" value="https://www.songbingjia.com/android/Bad showInfo Call" onclick="showInfo()">
< /body>
< /html>
单击第一个按钮会调用新建对象的showInfo方法,和预想的一样,提示对话框。单击第二个按钮,试图直接调用函数myFunc,由于myFunc是一个全局对象的一个方法,它给alert对话框传递的对象是window,而window对象没有info这个属性,所以提示window.info = undefined 。单击第三个按钮,尝试不指定对象,调用showInfo方法,会产生一个错误。匿名函数:前面我们给新建对象添加方法时,是先建立一个具名函数,然后将函数名赋值给方法,其实也可以直接使用匿名函数的。
myObject.showInfo = function() {
alert(this.info);
}
构造函数:如果我们只需要一个对象的实例,那么每次这样建立对象是没有问题的,如果需要创建很多实例,每次都经过这样的过程,太痛苦了。所以我们需要使用构造函数。
function myObject() {
//属性
this.info = "我是信息";
//方法
this.showInfo = function () {
alert(this.info);
}
//方法
this.setInfo = function(newInfo) {
this.info = newInfo;
}
}
以上我们就声明了一个类的构造函数,当我们需要此对象时,可以直接实例化,如下:
var myObject1 = new myObject();
var x = myObject1.info; // x包含我是信息
myObject1.showInfo(); // 显示 我是信息
myObject1.setInfo("我是新的信息"); //覆盖原info属性
当我们需要很多个实例时:
var a = new myObject();
var b = new myObject();
var c = new myObject();
完整代码:
< !DOCTYPE html>
< html lang="en">
< head>
< meta charset="UTF-8">
< title> 创建对象< /title>
< script>
function myObject() {
this.info = "我是信息";
this.showInfo = function () {
alert(this.info);
}
this.setInfo = function (newInfo) {
this.info = newInfo;
}
}
var myObject1 = new myObject();
var myObject2 = new myObject();
< /script>
< /head>
< body>
< input type="button" value="https://www.songbingjia.com/android/show info 1" onclick="myObject1.showInfo()">
< input type="button" value="https://www.songbingjia.com/android/show info 2" onclick="myObject2.showInfo()">
< input type="button" value="https://www.songbingjia.com/android/change info of object2" onclick="myObject2.setInfo(\'我是新的信息\')">
< /body>
< /html>
单击第一和第二按钮时,提示我是信息。单击第三个按钮,更换了属性info的值,再单击第一和第二按钮时,第一按钮提示我是信息,第二按钮提示我是新的信息,说明替换有效。构造函数参数:很多时候,我们建立对象时,需要传入一些参数,那么构造函数就必须带参数。
function Person(name) {
this.name = name;
this.info = \'我的名字叫\' + this.name;
this.showInfo = function() {
alert(this.info);
}
}
var p1 = new Person("虾米");
var p2 = new Person("大王");
定义构造函数时,也可以设置多个参数,
< !DOCTYPE html>
< html lang="en">
< head>
< meta charset="UTF-8">
< title> Title< /title>
< script>
function Car(color, year, make, miles) {
this.color = color;
this.year = year;
this.make = make;
this.miles = miles;
this.setMiles = function (newMiles) {
this.miles = newMiles;
}
this.showInfo = function () {
var str = "Car color is" + this.color + "\\n"
+ " Car year is " + this.year + "\\n"
+ " Car make is " + this.make + "\\n"
+ " Car miles is " + this.miles + "\\n";
alert(str);
}
}
var car1 = new Car("blue","2008","夏利",79500);
var car2 = new Car("yellow","2014","长安",56365);
< /script>
< /head>
< body>
< input type="button" value="https://www.songbingjia.com/android/car1" onclick="car1.showInfo()">
< input type="button" value="https://www.songbingjia.com/android/car2" onclick="car2.showInfo()">
< /body>
< /html>
下节我们接着分享关于对象的内容。
文章图片
推荐阅读
- debian安装ncat只为测udp网络通信
- 文件描述符与文件指针的关系与区别
- 计算机入门的一些常用小技巧总结
- shell 脚本一键自动化部署 python3 和 pip3 环境
- 学习Linux tar 命令(最简单也最困难)
- RabbitMQ-进阶
- 详解逃逸分析标量替换栈上分配
- 数仓中指标-标签,维度-度量,自然键-代理键等各名词解析及关系
- 红帽Linux入门指南第四期(系统的基本操作命令)