标签：javascript
首先看一个页面常用的js代码骨架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>js面对对象编程</title>
</head>
<body>
<script type="text/javascript" src="../js/lib/jquery-1.11.0.js"></script>
<script type="text/javascript">
;(function($){
var Obj = function(){//定义一个类
console.log(this);//==>Obj
this.init();
}
Obj.prototype = {//对象原型
ObjName:"我是一个对象",
saySomething:function(){
console.log(this.ObjName);
},
init:function(){
this.saySomething();
}
};
var Obj2 = function(){}
Obj2.prototype = new Obj();//类的继承
console.log("Obj2.ObjName:"+new Obj2().ObjName); //==>Obj2.ObjName:我是一个对象
Obj2.prototype.ObjName = "我继承了Obj.ObjName并且重写了它";
console.log("Obj2.ObjName:"+new Obj2().ObjName); //==>Obj2.ObjName:我继承了Obj.ObjName并且重写了它
Obj2.prototype.print = function print(str){
console.log("输出"+str);
};
$(document).ready(function($) {
var obj = new Obj();//实例化类 ==>输出：我是一个对象
var obj2 = new Obj2();//实例化类 ==>输出：我是一个对象
console.log("Obj2.ObjName:"+obj2.ObjName); //==>Obj2.ObjName:我继承了Obj.ObjName并且重写了它
obj2.print(‘试试‘);//==>"输出试试""
console.log(this);//==>#document
});
console.log(this);//==>Window
})(jQuery);
console.log(this);//==>Window
</script>
</body>
</html> |
代码分析 一、立即执行函数表达式IIFE IIFE immediately-invoked function expression 写法一(function($){...})(jQuery); 写法二(function($){...}(jQuery)); 其作用相当于 var a = function($){...}; a(jQuery); 让编写的代码能立即执行。
二、function(){} 在javascript中定义类函数都是funciton。 三、Obj.prototype类原型 可以像上面那样写在一起也可以分开写成 Obj.prototype.a = "我是字符串"; Obj.prototype.b = { name:"我是对象" }; Obj.prototype.c = [‘我是‘,‘数组‘]; Obj.prototype.d= function(){ return ""; 我是函数 }; 四、$(document).ready(function(){...}); 因为html文档是顺序执行的所以如果代码是写在所有文档元素之后这个$(document).ready()可以省略 五、js代码前的分号;或加号(+)是为了避免前一个js文档如果没有用分号结尾造成的文档错误。 |
本文出自 “木香蔷薇” 博客，转载请与作者联系！
标签：javascript
原文地址：http://muxiangqiangwei.blog.51cto.com/3832230/1762928
