对象-JavaScript入门基础（016）

最新推荐文章于 2024-04-18 17:52:13 发布

虾米大王

最新推荐文章于 2024-04-18 17:52:13 发布

阅读量177

点赞数

分类专栏： JavaScript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/modern358/article/details/112737263

版权

JavaScript 专栏收录该内容

329 篇文章 0 订阅

订阅专栏

面向对象编程是一种很重要的技术，有助于编写清晰可靠的、可以重复使用的代码。

创建对象：

可以直接创建空白对象

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="Good showInfo Call" onclick="myObject.showInfo()">    <input type="button" value="myFunc Call" onclick="myFunc()">    <input type="button" value="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="show info 1" onclick="myObject1.showInfo()">    <input type="button" value="show info 2" onclick="myObject2.showInfo()">    <input type="button" value="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="car1" onclick="car1.showInfo()">    <input type="button" value="car2" onclick="car2.showInfo()"></body></html>

下节我们接着分享关于对象的内容。

虾米大王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
对象-JavaScript入门基础（016）

面向对象编程是一种很重要的技术，有助于编写清晰可靠的、可以重复使用的代码。创建对象：可以直接创建空白对象myObject = new Object();此对象现在没有任何的属性和方法。myObject.info = "给你一些信息";这样对象就有一个info的属性。给对象添加方法： function myFunc() { alter(this.info);}myObject.showInfo ...
复制链接

扫一扫