Javscript 面向对象学习笔记(1)
1. 基本 构造函数 和 property
<!--script>
///在这个例子中有需注意的地方:
// 1. Schedule 传入的参数必须要是数组类型,如果只是一个Lecture 的实例,那么Length 是undefined .
// 2. 这个例子是书上抄的他的 display() 这个方法是没有写括号的,如果没有写括号那么会显示出display 这个函数的源代码.
// Lecture 类的构造函数
//用 name 和 teacher
function Lecture(name, teacher) {
//将参数保存为局部属性
this.name = name;
this.teacher = teacher;
}
//Lecture 类的一个方法 (method),用于生成一条显示Lecture 信息的字符串
Lecture.prototype.display = function () {
return this.teacher + "is teachering " + this.name;
};
//Schedule 类的构造函数,以课程的数组作为参数
function Schedule(lecture) {
this.lectures = lecture;
}
//构造一条字符串,表示课程的安排表
Schedule.prototype.display = function () {
var str = '';
if (this.lectures.length == undefined) {
return this.lectures.display();
}
//遍历每项课程,建立包含它们信息的字符串
for (var i = 0; i < this.lectures.length; i++) {
str += this.lectures[i].display() + " ";
}
return str;
};
// var lecture = new Lecture("小龙", "黎老师");
//// alert(lecture.display());
// var schedule = new Schedule(lecture);
// alert(schedule.display());
var lecture = new Lecture("小龙", "Mr.Tome");
var schedule = new Schedule(lecture);
alert(schedule.display());
</script-->
***************************************************************************
2.事件处理
<!--script>
window.onload = function () {
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
var temp = li[i];
temp.style.border = "1px solid red";
///下面这段js 报错 : temp的parentNode为空
temp.onclick = function (temp) {
temp.parentNode.removeChild(temp);
};
///下面这段我执行的时候只会执行一次,我随便点哪个li只会删除最后一个li
temp.onclick = function (temp) {
temp.parentNode.removeChild(temp);
};
}
///删除某个DOM 不过还是不明白jquery 里面的click 事件是怎么弄的哈..这样的话可以弄可编辑表格了
setTimeout(function () {
var delDom = document.getElementById("div1");
delDom.parentNode.removeChild(delDom);
}, 10000);
};
</script-->
<!--script>
window.onload = function () {
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].onmouseenter = function () {
this.style.backgroundColor = 'black';
};
li[i].onmouseleave = function () {
this.style.backgroundColor = 'white';
};
//onmouseenter 和 leave 优先级要高些下面的这段都没有效果的..I dont know.
//这里的backgroundColor 要大区分大小写
li[i].onmouseover = function () {
this.style.backgroundColor = 'blue';
};
li[i].onmouseout = function () {
this.style.backgroundColor = 'red';
};
//onclick的修正版.这里的this就是事件的发起者吧.猜想.
li[i].onclick = function () {
this.parentNode.removeChild(this);
};
<script-->
**********************************************************
3.引用类型
<!--script>
///引用类型
var arrNumbers = new Array("one", "two", "three");
var arrNumbersRef = arrNumbers;
arrNumbersRef.push("four");
var NumberClass = function (arrNumbers) {
this.Numbers = arrNumbers;
};
NumberClass.prototype.display = function () {
for (var i = 0; i < this.Numbers.length; i++) {
alert(this.Numbers[i]);
}
};
var NumberInstance = new NumberClass(arrNumbers);
NumberInstance.display();
////////分割线 和C#一样啊.字符串是特别的引用类型
var str1 = "one";
var str2 = str1;
str1 += ",two";
alert(str1 == str2);
</script-->
4.函数重载和类型检查
<!--script>
//函数重载和类型检查
//arguments 判断进来的参数.
function sendMessage(msg, obj) {
if (arguments.length == 2) {
obj.handleMsg(obj.name, msg);
}
else {return false;}
}
sendMessage("Hello,World");
//对象是用Json类组来表示的吧.不知道了,有点想打牌了啊..不想写得了.
sendMessage("Hello,World", { handleMsg: function (name, message) {
alert(name + "发送消息" + message);
}, name: "小王"
});
</script-->
**************************分割线*********************
5.类型检查和一个小例子转换成为一个 array
<script>
///任意对象转换成为数组
function makeArray() {
var arr = [];
for (var i = 0; i < arguments.length; i++) {
arr.push(arguments[i]);
}
return arr;
}
var strArray = makeArray("小王");
alert(strArray.length);
//分割线 下面的是类型判断
function message() {
this.display = function () {
//实例化过后 这边的 msg 不是undefined 是 null;如果没有这个属性再加上才是undefined吧.
//实践证明是这样的.如果这个类里面本来有msg实例化过后是null,没有再加上就是undefined. C# 实例化是null.
//或者
// if(typeof this.msg=='undefined')
//书上说可以使用构造函数 就是下面的 constructor 但是我在使用的时候提示为空..不知道了.先记下吧.一般就typeof 或者用值来判断吧.
if (this.msg.constructor != String) {
// if (this.msg == undefined) {
alert("正确");
return true;
}
alert(this.msg);
return false;
};
}
var msg = new message();
msg.msg = "hello";
msg.display();
var msg2 = new message();
msg2.display();
</script>
***********************************
6.Javascript 特权方法相当于这个方法是动态生成的.
<!--script>
function User(properties) {
for (var i in properties) {
(function (which) {
var p = i;
which["get" + p] = function () {
return properties[p];
};
which["set" + p] = function (val) {
properties[p] = val;
};
})(this);
}
}
//传值
var user = new User({ name: "bob", age: "44" });
//user.name为空，是私有变量
alert(user.name == null);
<script-->
<!--script>
function Person(name) {
this.name = name;
}
Person.prototype.getName = function () {
return this.name;
};
function User(name, password) {
this.name = name;
this.password = password;
}
User.prototype = new Person();
User.prototype.getPassword = function () {
return this.password;
};
//简单的辅助函数,让你可以将新函数绑定到对象的prototype上
Function.prototype.method = function (name, func) {
this.prototype[name] = func;
return this;
};
//一个相当复杂的函数,允许你方便地从其它对象继承函数
//同时仍然可以调用属于父对象的那些函数
Function.method("inherits", function (parent) {
//记录我们所在父层次的级数
var depth = 0;
var proto = this.prototype = new parent();
//创建一个新的名为'uber'的特权函数
//调用它时会执行所在继承时被重写的函数
this.method('uber', function uber(name) { });
});
</script-->