問題1:OOP 指什么?有哪些特性
1)面向?qū)ο蟪绦蛟O(shè)計
2)封裝 繼承 多態(tài)
封裝:構(gòu)造一個的對象诗芜,給這個對象 添加屬性和方法蜂桶,完成這個對象的過程就叫封裝
繼承:子類繼承父類 子類擁有父類的方法和屬性 子對象可以使用父類的方法 javascript里面有五種繼承方法
第一種譬正, 使用apply call 構(gòu)造函數(shù)綁定方法业踏。第二種, prototype模式 cat.prototype=new Animate植阴。第三種蟹瘾,直接繼承prototype ,cat.prototype=Animate.prototype。第四種掠手,利用空對象作為中介繼承prototype憾朴。第五種,拷貝繼承喷鸽。
多態(tài):一個引用類型在不同情況下的多種形態(tài)众雷,傳入的對象不同 同樣的方法 最終的結(jié)果不同
問題2: 如何通過構(gòu)造函數(shù)的方式創(chuàng)建一個擁有屬性和方法的對象?
function person(name,age,fruit){
this.name=name;
this.age=age;
this.fruit=fruit;
this.eat=function(){
console.log(this.name+'喜歡吃'+this.fruit)
}
}
//new實(shí)例化
var me=new person('pearl',18,'橘子')
console.log(me.name) //pearl
me.eat() //pearl喜歡吃橘子
問題3: prototype 是什么?有什么特性
1)原型鏈對象
2)函數(shù)默認(rèn)有一個prototype屬性 實(shí)例化這個函數(shù)時prototype會轉(zhuǎn)化成proto 默認(rèn)constroctur的值保存著原函數(shù)的地址 this指向當(dāng)前實(shí)例化的這個對象 當(dāng)實(shí)例化的對象要調(diào)用某個方法時 自身實(shí)例化對象上沒有則到原型鏈上查找做祝。
問題4:畫出如下代碼的原型圖
function People (name){
this.name = name;
this.sayName = function(){
console.log('my name is:' + this.name);
}
}
People.prototype.walk = function(){
console.log(this.name + ' is walking');
}
var p1 = new People('kyle');
var p2 = new People('vanko');
問題5:創(chuàng)建一個 Car 對象砾省,擁有屬性name、color混槐、status编兄;擁有方法run,stop声登,getStatus
function Cat(name,color,status){
this.name=name;
this.color=color;
this.status=status;
}
Cat.prototype.run=function(){
console.log("我是一只會跳的"+this.name+"貓")
}
Cat.prototype.stop=function(){
console.log("我可以自己停下來")
}
Cat.prototype.getStatus=function(){
console.log("我在"+this.status)
}
var cat1=new Cat("呀呀","白色","睡覺")
cat1.name //呀呀
cat1.color //白色
cat1.run() //我是一只會跳的呀呀貓
cat1.stop() //我可以自己停下來
cat1.getStatus() //我在睡覺
問題6:創(chuàng)建一個 GoTop 對象狠鸳,當(dāng) new 一個 GotTop 對象則會在頁面上創(chuàng)建一個回到頂部的元素揣苏,點(diǎn)擊頁面滾動到頂部。擁有以下屬性和方法
//1. `ct`屬性件舵,GoTop 對應(yīng)的 DOM 元素的容器
//2. `target`屬性卸察, GoTop 對應(yīng)的 DOM 元素
//3. `bindEvent` 方法, 用于綁定事件
//4 `createNode` 方法铅祸, 用于在容器內(nèi)創(chuàng)建節(jié)點(diǎn)
function GoTop(obj){
this.ct=obj.ct
this.text=obj.text
this.createNode()
this.bindEvent()
}
GoTop.prototype.bindEvent=function(){
this.target.on('click',function(){
$(window).scrollTop(0)
})
}
GoTop.prototype.createNode=function(){
this.target=$('<div class="gotop">'+this.text+'</div>')
this.ct.append(this.target)
}
var obj1={
ct:$('body'),
text:'go to top'
}
var gotop=new GoTop(obj1)