一、对象 与 函数的关系
1、Object 函数是 Function 的一个实例
Object.constructor == Function // true
2、 函数即是 Function 的实例，也是 Object 的实例
function fn(){}
fn.constructor == Function // true
fn.constructor == Object // false
3、{} 与 Object 的关系
var obj = {};
obj.constructor === Object // true
总结，对象是由函数构造出来的
二、原型链
原型链：当前原型上没有去上一层原型上找
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
三、 对象继承
在上面例子中 可以发现,给对象的
constructor.prototype添加方法属性 对象就会继承 如果要实现一个对象继承其他对象我们这样做
一 、利用 call() 及 for in 继承
function inherit() {
fn.call(obj3, '旺财');
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];
}
}
}
二、 构造函数实例方式继承
1、 利用obj.constructor.prototype 继承对象 自身属性及 继承属性
function fn(name) {
this.name = name;
}
fn.prototype.index = '88';
function fn2(age) {
this.age = age;
}
fn2.prototype = new fn('旺财');
var obj2 = new fn2(66);
console.log(obj2.name); // 旺财
console.log(obj2.index); // 88
console.log(obj2.age); // 88
2、 利用 prototype 继承对象 自身属性及 继承属性
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
在上面例子中 可以发现,给对象的
constructor.prototype添加方法属性 对象就会继承 如果要实现一个对象继承其他对象我们这样做
三、obj.constructor.prototype 与 对象 obj.__proto__ 的关系 ,带__为非标准属性
function fn(name) {
this.name = name;
}
var obj = new fn('二狗');
console.log(obj.__proto__ === fn.prototype) // true，
四、 对象继承对象
// 父类模板
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) {
// 指向自己类生成的实例对象，继承父类私有属性
Father.call(this, obj);
}
// 第一种继承 引用值类型，内存地址相同，继承原型
// son.prototype = Father.prototype;
// 第二种继承 继承原型 和 私有属性
// Son.prototype = new Father({});
// 第三种继承
function middle() {}; // 中间商
middle.prototype = Father.prototype; // 继承原型
Son.prototype = new middle(); // 过滤私有属性
// 第四种继承 for in 遍历 只拷贝一层 不会遍历原型链
// for (var key in Father.prototype) {
// Son.prototype[key] = Father.prototype[key];
// }
// 子类原型
Son.prototype = {
constructor : Son,
add(){
console.log(this.name);
}
}
// 实例对象
const boss = new Father({
"name" : '帅逼',
"age" : '18',
'eat' : '豆豆'
});
// 实例对象
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);
案例：用面向对象改写 限制范围拖拽
案例：用面向对象改写 自动轮播
