面向物件方面的一些東東
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
botton{
width: 60px;
height: 30px;
line-height: 30px;
text-align: center;
display: block;
background-color: #81858d;
color: #FFFFFF;
border-radius:5px ;
}
</style>
</head>
<body>
<botton class="btn">計數!</botton>
<p class="pcoun">0</p>
<script type="text/javascript">
// 函式作為方法的呼叫
var myfonc = {
firstName:"zhangsan",
lastName :"lisi",
fullName:function(){
return this;
}
}
console.log(myfonc.fullName());
// 建構函式:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// 此處一定要new出來,物件才可以被呼叫
var x = new myFunction('11','222');
console.log(x.firstName+" "+x.lastName);
// 一個小的計算
var counte = 0;
function add(){
return counte +=1;
}
document.getElementsByClassName("btn")[0].onclick=function(){
document.getElementsByClassName('pcoun')[0].innerHTML = add();
}
/*
* 面向物件
* new出來的物件都是空白的，所以需要自己新增屬性
*/
// 1.通過Object建立簡單物件：
var obj = new Object();
// 為改物件新增屬性
obj.name ="zhansan";
obj.age = 15;
/*
* 為該物件新增方法
* 方法就是一個函式，所以呼叫這個函式只需obj.showName();
*/
obj.showName = function(){
console.log("姓名："+this.name)
}
obj.showage = function(){
console.log("年齡："+this.age)
}
// 呼叫物件的方法
obj.showage()
obj.showName();
/*
* 2.用工廠方式來構造物件：工廠，簡單來說就是投入原料、加工、出廠。
* 通過建構函式來生成物件，將重複的程式碼提取到一個函式裡面，
* 避免像第一種方式寫大量重複的程式碼。這樣我們在需要這個物件的時候，就可以簡單地創建出來了。
*/
// 1、建構函式
function createPerson(name,age){
// 建立物件
var person = new Object();
// 新增原料
person.name = name;
person.age = age;
// 加工原料
person.showname = function(){
console.log(this.name)
}
person.showage = function(){
console.log(this.age)
}
return person;
}
var wang = createPerson('wanger',55);
wang.showname();
</script>
</body&