一、對(duì)象 與 函數(shù)的關(guān)系
1僧须、Object 函數(shù)是 Function 的一個(gè)實(shí)例
Object.constructor == Function // true
2崭放、 函數(shù)即是 Function 的實(shí)例，也是 Object 的實(shí)例
function fn(){}
fn.constructor == Function // true
fn.constructor == Object // false
3幢码、{} 與 Object 的關(guān)系
var obj = {};
obj.constructor === Object // true
總結(jié)，對(duì)象是由函數(shù)構(gòu)造出來(lái)的
二尖飞、原型鏈
原型鏈：當(dāng)前原型上沒(méi)有去上一層原型上找
obj.prototype.isPrototypeOf( fn.prototype )
// fn.prototype 是否繼承自 obj.prototype
function fn(){}
var obj = new fn();
Object.prototype.isPrototypeOf( fn.prototype ) // true
Function.prototype.isPrototypeOf( Object.prototype ) // true
三症副、 對(duì)象繼承
在上面例子中 可以發(fā)現(xiàn),給對(duì)象的
constructor.prototype添加方法屬性 對(duì)象就會(huì)繼承 如果要實(shí)現(xiàn)一個(gè)對(duì)象繼承其他對(duì)象我們這樣做
一 、利用 call() 及 for in 繼承
function inherit() {
fn.call(obj3, '旺財(cái)');
for (key in fn.prototype) {
if (!obj3[key]) {
obj3[key] = fn.prototype[key];
}
}
}
function inherit(constructor, obj, ownAttr) {
constructor.call(obj3, ownAttr);
for (key in constructor.prototype) {
if (!obj[key]) {
obj[key] = constructor.prototype[key];
}
}
}
二政基、 構(gòu)造函數(shù)實(shí)例方式繼承
1贞铣、 利用obj.constructor.prototype 繼承對(duì)象 自身屬性及 繼承屬性
function fn(name) {
this.name = name;
}
fn.prototype.index = '88';
function fn2(age) {
this.age = age;
}
fn2.prototype = new fn('旺財(cái)');
var obj2 = new fn2(66);
console.log(obj2.name); // 旺財(cái)
console.log(obj2.index); // 88
console.log(obj2.age); // 88
2、 利用 prototype 繼承對(duì)象 自身屬性及 繼承屬性
function fn(name) {
this.name = name;
}
fn.prototype.index = '88';
function fn2(age) {
this.age = age;
}
var obj = new fn('二狗');
fn.prototype = Object.create(fn.prototype);
console.log(obj2.name);//二狗
console.log(obj2.index);//88
在上面例子中 可以發(fā)現(xiàn),給對(duì)象的
constructor.prototype添加方法屬性 對(duì)象就會(huì)繼承 如果要實(shí)現(xiàn)一個(gè)對(duì)象繼承其他對(duì)象我們這樣做
三沮明、obj.constructor.prototype 與 對(duì)象 obj.__proto__ 的關(guān)系 ,帶__為非標(biāo)準(zhǔn)屬性
function fn(name) {
this.name = name;
}
var obj = new fn('二狗');
console.log(obj.__proto__ === fn.prototype) // true咕娄，
四、 對(duì)象繼承對(duì)象
// 父類模板
function Father(obj) {
this.name = obj.name,
this.age = obj.age
this.eat = obj.eat
}
// 父類原型
Father.prototype = {
constructor : Father,
add(){
console.log(this.name);
}
}
// 子類繼承父類
function Son(obj) {
// 指向自己類生成的實(shí)例對(duì)象珊擂，繼承父類私有屬性
Father.call(this, obj);
}
// 第一種繼承 引用值類型圣勒，內(nèi)存地址相同费变，繼承原型
// son.prototype = Father.prototype;
// 第二種繼承 繼承原型 和 私有屬性
// Son.prototype = new Father({});
// 第三種繼承
function middle() {}; // 中間商
middle.prototype = Father.prototype; // 繼承原型
Son.prototype = new middle(); // 過(guò)濾私有屬性
// 第四種繼承 for in 遍歷 只拷貝一層 不會(huì)遍歷原型鏈
// for (var key in Father.prototype) {
// Son.prototype[key] = Father.prototype[key];
// }
// 子類原型
Son.prototype = {
constructor : Son,
add(){
console.log(this.name);
}
}
// 實(shí)例對(duì)象
const boss = new Father({
"name" : '帥逼',
"age" : '18',
'eat' : '豆豆'
});
// 實(shí)例對(duì)象
const small = new Son({
"name" : '大帥逼',
"age" : '130'
});
// console.log(boss);
// console.log(small);
// console.log(boss.name, boss.age, boss.eat);
// console.log(small.name, small.age, small.eat);
案例：用面向?qū)ο蟾膶?xiě) 限制范圍拖拽
案例：用面向?qū)ο蟾膶?xiě) 自動(dòng)輪播
