获取对象的原型
Object.getPrototypeOf()
let hd = {};
let xj = {};
console.log(Object.getPrototypeOf(hd) == Object.getPrototypeOf(xj));//true
console.log(Object.getPrototypeOf(hd) == Object.prototype);//true
创建对象并指定原型
Object.create();
创建一个新对象，第一个参数是这个对象的原型，第二个参数用以对对象的属性进行进一步描述。
//创建一个没有原型的对象
let hd = Object.create(null, {
name: {
value: '后盾人'
}
});
console.log(Object.getPrototypeOf(hd));//null
原型方法与对象方法优先级
如果对象自己有方法，则优先执行自己的方法
Object.prototype.render = function() {
console.log('parent');
};
let hd = {
render() {
console.log('child');
}
};
hd.render();//child
函数拥有多个长辈
函数拥有多个原型; 函数既是对象又是构造函数。
函数作为构造函数使用时，会给创建的对象自动指定一个原型对象 User.prototype
function User(){}
let hd = new User();
console.log(hd.__proto__ === User.prototype);//true
函数作为对象使用时，可以使用 User.__proto__ 中的属性和方法。服务于函数自己
function User(){}
User.__proto__.view = function() {
console.log('view');
};
User.view();//view
原型关系详解
原型也是个对象，也会有自己的父级。
User.prototype.__proto__ 指向 Object.prototype
User.__proto__ .__proto__ 指向 Object.prototype
Object.prototype 没有原型，指向 null
function User(){}
Object.prototype.show = function(){
console.log('show');
};
User.show();//show
(new User()).show();//show
console.log(User.prototype.__proto__ === Object.prototype);//true
console.log(User.__proto__.__proto__ === Object.prototype);//true
console.log(User.prototype.__proto__ === User.__proto__.__proto__);//true
console.log(Object.prototype.__proto__ === null);//true
系统构造函数的原型体现
let arr = [];
console.log(arr.__proto__ == Array.prototype);//true
let str = '';
console.log(str.__proto__ == String.prototype);//true
自定义对象的原型设置
Object.setPrototypeOf();
let hd = {name: 'hd'};
let parent = {name: 'parent'};
Object.setPrototypeOf(hd, parent);
原型中的 constructor 引用
作用是，通过原型找到他的构造函数。
function User(){}
console.log(User.prototype.constructor == User);//true
//改变原型是 constructor 属性得加上，否则无法找到他的构造函数
User.prototype = {
constructor: User,
show() {
console.log('show');
}
}
根据对象创建新对象
constructor 属性。
function User(name) {
this.name = name;
this.show = function () {
console.log(this.name);
}
}
let hd = new User('后盾人');
hd.show();//后盾人
function createByObject(obj, ...args) {
const constructor = Object.getPrototypeOf(obj).constructor;
return new constructor(...args);
}
let xj = createByObject(hd, '向军');
xj.show();//向军
原型链
let a = {
name: 'a'
};
let c = {
name: 'c'
};
let b = {
name: 'b',
show() {
console.log(this.name);
}
};
Object.setPrototypeOf(a, b);
Object.setPrototypeOf(c, b);
a.show(); //a
c.show(); //c
原型链检测
instanceof
检测一个对象的原型链上是否有构造函数的prototype。
function User(){}
let hd = new User();
console.log(hd instanceof User);//true
console.log(hd instanceof Object);//true
isPrototypeOf
检测一个对象是否在另一个对象的原型链上。
let a = {name: 'a'};
let b = {name: 'b'};
let c = {name: 'c'};
console.log(b.isPrototypeOf(a));//false
Object.setPrototypeOf(a, b);
Object.setPrototypeOf(b, c);
console.log(b.isPrototypeOf(a));//true
console.log(c.isPrototypeOf(a));//true
属性检测
in
不仅检测当前对象，还会检测原型链上的属性。
let a = {url: 'houdunren'};
let b = {name: '后盾人'};
Object.prototype.web = 'hdcms.com';
console.log('web' in a);//true
hasOwnProperty
仅检测当前对象。
let a = {url: 'houdunren'};
let b = {name: '后盾人'};
Object.prototype.web = 'hdcms.com';
console.log(a.hasOwnProperty('web'));//false
借用原型链
call、apply
//#1
let hd = {
data: [1, 2, 3, 34, 5, 7]
};
Object.setPrototypeOf(hd, {
max(data) {
return data.sort((a, b) => b-a)[0];
}
});
let xj = {
lessons: {
js: 87,
php: 63,
node: 99,
linux: 88
}
};
console.log(hd.max.call(null, Object.values(xj.lessons)));//99
//#2
let hd = {
data: [1, 2, 3, 34, 5, 7]
};
console.log(Math.max.apply(null, hd.data)); //34
let xj = {
lessons: {
js: 87,
php: 63,
node: 99,
linux: 88
}
};
console.log(Math.max.apply(null, Object.values(xj.lessons))); //99
DOM节点借用Array原型方法
<button message="后盾人" class="red">后盾人</button>
<button message="hdcms">hdcms</button>
<script>
let btns = document.querySelectorAll('button');
btns = Array.prototype.filter.call(btns, function (item) {
return item.hasAttribute('class');
});
console.log(btns[0].innerHTML);//后盾人
</script>
合理的构造函数方法声明
可以把公用的方法声明在构造函数的原型prototype上，减少额外内存开销。
//#1
function User(name) {
this.name = name;
}
User.prototype.show = function () {
console.log(this.name);
}
User.prototype.get = function () {
console.log('...get');
}
let lisi = new User('李四');
let xj = new User('向军');
lisi.show();//李四
xj.show();//向军
//#2
function User(name) {
this.name = name;
}
User.prototype = {
constructor: User,
show: function () {
console.log(this.name);
},
get: function () {
console.log('...get');
}
}
let lisi = new User('李四');
let xj = new User('向军');
lisi.show(); //李四
xj.show(); //向军
this 和原型没有关系
this 永远指向调用属性的对象。
let hd = {
name: '后盾人'
};
let User = {
name: '向军',
show() {
console.log(this.name);
}
}
Object.setPrototypeOf(hd, User);
hd.show();//后盾人
不要滥用原型
不建议在系统的原型链上增加方法。
<button onclick="this.hide()">点我隐藏</button>
<script src="a.js"></script>
<script src="b.js"></script>
a.js
Object.prototype.hide = function() {
this.setAttribute("hide", true);
}
b.js
Object.prototype.hide = function() {
this.style.display = 'none';
}
Object.create 和 __proto__
Object.create 可以定义对象的原型，但是没有提供获取的方法。
而非标准的(浏览器厂商提供) __proto__ 既可以设置也可以获取。__proto__ 其实是一个 getter 和 setter，只能设置为对象类型（原型的上有做限制）。
使用 Object.setPrototypeOf 和 Object.getPrototypeOf 代替 __proto__。
改变构造函数原型并不是继承
function User() {}
User.prototype.name = function () {
console.log('user.name');
}
function Admin() {}
//改变了构造函数的原型
Admin.prototype = User.prototype;
Admin.prototype.role = function() {
console.log('admin.role');
}
function Member() {}
Member.prototype = User.prototype;
Member.prototype.role = function() {
console.log('member.role');
}
let a = new Admin();
let m = new Member();
a.role();//member.role
m.role();//member.role
继承是原型的继承
#1
function User() {}
User.prototype.name = function () {
console.log('user.name');
}
function Admin() {}
Admin.prototype.__proto__ = User.prototype;
Admin.prototype.role = function() {
console.log('admin.role');
}
function Member() {}
Member.prototype.__proto__ = User.prototype;
Member.prototype.role = function() {
console.log('member.role');
}
let a = new Admin();
let m = new Member();
a.role();//admin.role
a.name();//user.name
m.role();//member.role
m.name();//user.name
#2
function User() {}
User.prototype.name = function () {
console.log('user.name');
}
function Admin() {}
Admin.prototype = Object.create(User.prototype, {
constructor: {
value: Admin
}
});
Admin.prototype.role = function() {
console.log('admin.role');
}
function Member() {}
Member.prototype = Object.create(User.prototype, {
constructor: {
value: Member
}
});
//Admin.prototype.constructor = Member;
Member.prototype.role = function() {
console.log('member.role');
}
let a = new Admin();
let m = new Member();
a.role();//admin.role
a.name();//user.name
m.role();//member.role
m.name();//user.name
方法重写和父属性访问
function User() {}
User.prototype.show = function () {
return 'user.show';
}
function Admin() {}
Admin.prototype = Object.create(User.prototype, {
constructor: {
value: Admin
}
});
Admin.prototype.show = function() {
return User.prototype.show() + '|admin.show';
}
let a = new Admin();
console.log(a.show());//user.show|admin.show
面向对象的多态
function User() {}
User.prototype.show = function () {
console.log(this.description());
}
function Admin() {}
Admin.prototype = Object.create(User.prototype, {
constructor: {
value: Admin
}
});
Admin.prototype.description = function() {
return '管理员';
}
function Member() {}
Member.prototype = Object.create(User.prototype, {
constructor: {
value: Member
}
});
Member.prototype.description = function() {
return '会员';
}
let a = new Admin();
let m = new Member();
a.show();//管理员
m.show();//会员
使用父类构造函数初始属性
function User(name, age) {
this.name = name;
this.age = age;
}
User.prototype.show = function() {
console.log(this.name, this.age);
}
function Admin(...args) {
User.apply(this, args)
}
Admin.prototype = Object.create(User.prototype, {
constructor: {
value: Admin
}
});
function Member(...args) {
User.apply(this, args)
}
Member.prototype = Object.create(User.prototype, {
constructor: {
value: Member
}
});
let xj = new Admin('向军', 18);
let lisi = new Member('李四', 19);
xj.show();//向军 18
lisi.show();//李四 19
封装继承
#1
function extend(sub, sup) {
sub.prototype = Object.create(sup.prototype, {
constructor: {
value: Member
}
});
}
function User(name, age) {
this.name = name;
this.age = age;
}
User.prototype.show = function() {
console.log(this.name, this.age);
}
function Admin(...args) {
User.apply(this, args)
}
function Member(...args) {
User.apply(this, args)
}
extend(Admin, User);
extend(Member, User);
let xj = new Admin('向军', 18);
let lisi = new Member('李四', 19);
xj.show();//向军 18
lisi.show();//李四 19
#2
function User(name, age) {
this.name = name;
this.age = age;
}
User.prototype.show = function() {
console.log(this.name, this.age);
}
function admin(name, age) {
const instance = Object.create(User.prototype);
User.call(instance, name, age);
return instance;
}
let hd = admin('向军', 18);
hd.show();//向军 18
使用 mixin 实现多继承
mixin 类是一个包含许多供其它类使用的方法的类。
mixin 类不用来继承做为其它类的父类。
function extend(sub, sup) {
sub.prototype = Object.create(sup.prototype);
sub.prototype.constructor = sub;
}
function User(name, age) {
this.name = name;
this.age = age;
}
User.prototype.show = function() {
console.log(this.name, this.age);
};
const Credit = {
total() {
console.log("统计积分");
}
};
const Request = {
ajax() {
console.log("请求后台");
}
};
function Admin(...args) {
User.apply(this, args);
}
extend(Admin, User);
Object.assign(Admin.prototype, Request, Credit);
let hd = new Admin("向军", 19);
hd.show();
hd.total(); //统计积分
hd.ajax(); //请求后台
super 关键字
super 是在 mixin 类的原型中查找，而不是在 User 原型中
function extend(sub, sup) {
sub.prototype = Object.create(sup.prototype);
sub.prototype.constructor = sub;
}
function User(name, age) {
this.name = name;
this.age = age;
}
User.prototype.show = function() {
console.log(this.name, this.age);
};
const Request = {
ajax() {
return "请求后台";
}
};
const Credit = {
__proto__: Request,
total() {
console.log(super.ajax() + ",统计积分");
}
};
function Admin(...args) {
User.apply(this, args);
}
extend(Admin, User);
Object.assign(Admin.prototype, Request, Credit);
let hd = new Admin("向军", 19);
hd.show();
hd.total(); //统计积分
hd.ajax(); //请求后台