国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

面向過(guò)程寫法

//面向過(guò)程
var btnObj=document.getElementById("btn")
var divObj=document.getElementById("box")
btnObj.onclick=function(){
divObj.style.backgroundColor="yellow"
}

然后再看看面向?qū)ο?，可以輕松一次操作多個(gè)屬性

//面向?qū)ο?/div>
function changeStyle(btnId,divId,json){
this.btn=document.getElementById(btnId);
this.div=document.getElementById(divId);
this.json=json;
}
changeStyle.prototype.init=function(){
var that=this;
this.btn.onclick=function(){
for(key in that.json){
that.div.style[key]=that.json[key]
}
}
}
var json={backgroundColor:"yellow",width:"200px"}
var test=new changeStyle("btn","box",json)
test.init()

創(chuàng)建對(duì)象的三種方式

首先 對(duì)象 是什么

特指的某個(gè)事物，具有屬性和方法(一組無(wú)需的屬性的集合)    比如   人

其特征為 屬性，比如，身高，體重

其行為是方法  比如    吃飯，睡覺(jué)，敲代碼

1.字面量的方式

var person1={
name:"蜘蛛俠",
age:20,
sex:"男",
eat:function(){
console.log("吃面包")
}
}

2. 調(diào)用系統(tǒng)的構(gòu)造函數(shù)

var person2=new Object();
person2.name="蝙蝠俠";
person2.age=30;
person2.sex="男";
person2.eat=funciton(){
console.log("吃肉")
}

以上這兩種方式，創(chuàng)建出來(lái)的對(duì)象 無(wú)法確定到底是什么類型的,如下

蜘蛛俠和蝙蝠下應(yīng)該都屬于人類，但這里無(wú)法確定

function Person(){
}
console.log(person2 instanceof Person)   //返回false
console.log(person2 instanceof Object)  //返回True

3. 自定義構(gòu)造函數(shù)方式--->函數(shù)名是大寫(首字母)

使用這種方式 創(chuàng)建出來(lái)的 "鋼鐵俠"  屬于人類范疇

function Person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.eat=function(){
console.log("吃米飯")
}
}
//創(chuàng)建對(duì)象 也叫 實(shí)例化一個(gè)對(duì)象，的同時(shí)對(duì)屬性進(jìn)行初始化  對(duì)象是由構(gòu)造函數(shù)創(chuàng)建的
var person3=new Person("鋼鐵俠",25,"男")
console.log(person3 instanceof Person)//返回true

這期間做了哪些事呢

1.開(kāi)辟空間存儲(chǔ)對(duì)象
2.把this 設(shè)置為當(dāng)前的對(duì)象
3.設(shè)置屬性和方法的值

4.把this 對(duì)象返回

工廠模式創(chuàng)建對(duì)象

function createObject(name,age){
var obj=new Object();
obj.name=name;
obj.age=age;
obj.sayHi=function(){
console.log("您好");
}
return obj;
}
var person4=createObject("小紅",40)

構(gòu)造函數(shù)創(chuàng)建帶來(lái)的問(wèn)題

首先 自定義構(gòu)造函數(shù)

function Person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.eat=function(){
console.log("今天吃拉面")
}
}

實(shí)例化兩個(gè)對(duì)象

var per1=new Person("小紅",20,"男")
var per2=new Person("小強(qiáng)",23,"男")

 兩個(gè)方法都可以調(diào)用,并且輸出結(jié)果是一樣的

per1.eat()
per2.eat()

但是其實(shí)這是兩個(gè)方法 你會(huì)發(fā)現(xiàn)這兩個(gè)方法并不相等

console.log(per1.eat==per2.eat)

當(dāng)遇到這種情況,問(wèn)題就變嚴(yán)重了,會(huì)產(chǎn)生100個(gè)不一樣的eat方法

因?yàn)槊看螌?shí)例化的指向都不相同  每次都會(huì)進(jìn)行開(kāi)辟空間,這樣的做法就會(huì)浪費(fèi)內(nèi)存

for(var i=0;i<100;i++){
var per=new Person("小明",18,"男")
per.eat()
}

解決方法

通過(guò)原型來(lái)解決-------數(shù)據(jù)共享，節(jié)省內(nèi)存空間

首先還是自定義構(gòu)造函數(shù)

function Person(name,age){
this.name=name;
this.age=age;
}

然后通過(guò)原型來(lái)添加方法

Person.prototype.eat=funciton(){
console.log("我要吃黃燜雞")
}

實(shí)例化兩個(gè)對(duì)象

var p1=new Person("小紅",20)
var p2=new Person("小明",20)

此時(shí)  兩個(gè)實(shí)例對(duì)象的eat方法相等了，就算實(shí)例化100個(gè)對(duì)象,也只開(kāi)了一個(gè)空間

console.log(p1.eat==p2.eat)

然后查看一下是否有這個(gè)方法

并不存在"小紅"這個(gè)對(duì)象上,但是存在于原型上，當(dāng)你調(diào)用這個(gè)方法的時(shí)候，他會(huì)通過(guò)__propto__向上查找方法