WEB基础之：JavaScript面向对象
javascript面向对象
1. 对象与属性
一个 javascript 对象有很多属性。一个对象的属性可以被解释成一个附加到对象上的变量。对象的属性和普通的 javascript 变量基本没什么区别，仅仅是属性属于某个对象。
属性定义了对象的特征，可以通过"."符号来访问一个对象的属性。
对象的名字和属性的名字都是大小写敏感。
var myCar = new Object();
myCar.make = "MM";
myCar.model = "M1";
myCar.year = 2020;
// 对象中未赋值的属性的值为undefined（而不是null）。
myCar.noProperty; // undefined
JavaScript 对象的属性也可以通过方括号访问或者设置,对象有时也被叫作关联数组, 因为每个属性都有一个用于访问它的字符串值。
// 访问
myCar['make'] // "MM"
// 设置
myCar['make'] = 'GG' // "GG"
一个对象的属性名可以是任何有效的 JavaScript 字符串，或者可以被转换为字符串的任何类型，包括空字符串。
如果不是一个有效的 JavaScript 标识符（例如，一个由空格或连字符，或者以数字开头的属性名），就只能通过方括号标记访问。这个标记法在属性名称是动态判定（属性名只有到运行时才能判定）时非常有用。
// 同时创建四个变量，用逗号分隔
var myObj = new Object(),
str = "myString",
rand = Math.random(),
obj = new Object();
myObj.type = "Dot syntax";
myObj["date created"] = "String with space";
myObj[str] = "String value";
myObj[rand] = "Random Number";
myObj[obj] = "Object";
myObj[""] = "Even an empty string";
console.log(myObj);
// 注意，方括号中的所有键都将转换为字符串类型，JavaScript将调用obj.toString()方法，并将此结果字符串用作新键，因为JavaScript中的对象只能使用String类型作为键类型。
1.1 枚举一个对象的所有属性
function showProps(obj, objName) {
var result = "";
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
result += objName + "." + i + " = " + obj[i] + "\n";
}
}
return result;
}
showProps(myCar,"myCar")
/*
"myCar.make = GG
myCar.model = M1
myCar.year = 2020
"
*/
2. 创建新对象
2.1 对象初始化器创建对象
var newObj = { property_1: value_1, // property_# 可以是一个标识符...
2: value_2, // 或一个数字...
["property" +3]: value_3, // 或一个可计算的key名...
"property n": value_n }; // 或一个字符串
var myCar = {color: "red", wheels: 4, maker: {compName: GG, Tel: 1234}};
2.2 使用构造函数创建对象
- 通过创建一个构造函数来定义对象的类型。首字母大写是非常普遍而且很恰当的惯用法。
- 通过
new创建对象实例。
// 定义对象类型，为对象类型创建一个函数以声明类型的名称、属性和方法。
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
// 创建一个 mycar 对象并且将指定的值赋给它的属性。
var mycar = new Car("GG", "M1", 2020);
// 为对象类型定义属性
Car.prototype.color = null;
mycar.color = "red";
2.3 使用 Object.create 方法创建对象
// Animal properties and method encapsulation
var Animal = {
type: "Invertebrates", // 属性默认值
displayType : function() { // 用于显示type属性的方法
console.log(this.type);
}
}
// 创建一种新的动物——animal1
var animal1 = Object.create(Animal);
animal1.displayType(); // Invertebrates
// 创建一种新的动物——Fishes
var fish = Object.create(Animal);
fish.type = "Fishes";
fish.displayType(); // Fishes
2.4 继承
所有的 JavaScript 对象至少继承于一个对象。被继承的对象被称作原型，并且继承的属性可通过构造函数的 prototype 对象找到。
2.5 定义方法
一个方法是关联到某个对象的函数。
objectName.methodname = function_name; //methodname 是方法的名称，function_name 是函数的名称。
var myObj = {
myMethod: function(params) {
// ...do something
}
// 或者 这样写也可以
myOtherMethod(params) {
// ...do something else
}
};
// 调用方法
object.methodname(params);
2.6 通过 this 引用对象
- 关键字
this，它可以在方法中使用以指代当前对象。
假设你有一个名为 validate 的函数，它根据给出的最大与最小值检查某个对象的 value 属性：
function validate(obj, lowval, hival) {
if ((obj.value < lowval) || (obj.value > hival)) {
alert("Invalid Value!");
}
}
然后，你可以在每个元素的 onchange 事件处理器中调用 validate，并通过 this 传入相应元素，代码如下：
<input type="text" name="age" size="3"
onChange="validate(this, 18, 99)">
总的说来， this 在一个方法中指调用的对象。
- 当与
form属性一起使用时，this可以指代当前对象的父窗体。
在下面的例子中，窗体 myForm 包含一个 Text对象和一个按钮，当用户点击按键，Text 对象的值被设为窗体的名称。按钮的 onclick 事件处理器使用 this.form 以指代其父窗体，即 myForm。
<form name="myForm">
<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
<p><input name="button1" type="button" value="Show Form Name"
onclick="this.form.text1.value = this.form.name">
</p>
</form>
