目录
[[Prototype]]机制[[Prototype]] 机制: JavaScript 中这个[[Prototype]] 机制的本质就是对象之间的关联关系。
SonA 未重写父类方法，所以.say()执行的是父类中的say方法
SonB 重写了父类方法，所以.say()执行的是重写后的say方法
class Father {
id = '';
constructor(id) {
this.id = id;
}
say() {
return this.id;
}
}
class SonA extends Father {
label = '';
constructor(id, label) {
super(id);
this.label = label;
}
}
class SonB extends Father {
label = '';
constructor(id, label) {
super(id);
this.label = label;
}
say() {
return this.label;
}
}
const sonA = new SonA('aaa', 'Lee');
const sonB = new SonB('bbb', 'Tom');
console.log(sonA, sonB); // SonA {id: 'aaa', label: 'Lee'} SonB {id: 'bbb', label: 'Tom'}
console.log(sonA.say(), sonB.say()); // aaa Tom
同样是把实例委托给了Bar并把Bar委托给了Foo，从而实现了三个对象之间的关联。但是这里更简洁，不需要那些复杂困惑的模仿类行为，比如构造函数、原型以及new。
Foo = {
init : function(who) {
this.me = who;
},
identity : function() {
return "I am " + this.me;
}
};
Bar = Object.create(Foo); // 开始第一层委托
Bar.speak = function() { // 定义自己的功能
alert("Hello" + this.identity() + "."); // 把委托隐藏在 API 内部
}
var b1 = Object.create(Bar); // 开始第二层委托
b1.init("Saul");
var b2 = Object.create(Bar);
b2.init("Carrie");
b1.speak();
b2.speak();互相委托（禁止）： 你无法在两个或两个以上互相（双向）委托的对象之间创建循环委托。
调试： 对象关联风格的代码中，不需要关注谁“构造了”对象，浏览器调试中“构造函数名称”的跟踪没有意义。
类理论
function Foo(who) {
this.me = who;
}
Foo.prototype.identify = function() {
return 'I am ' + this.me;
};
function Bar(who) {
Foo.call(this, who);
}
Bar.prototype = Object.crreate(Foo.prototype);
Bar.prototype.speak = function() {
alert('Hello, ' + this.identify() + '.');
};
var b1 = new Bar('b1');
var b2 = new Bar('b2');
b1.speak();
b2.speak();JavaScript中的函数之所以可以访问call(..)、apply(..)和bind(..)，就是因为函数本身是对象，而函数对象同样有[[Prototype]]并且关联到Function.prototype对象，因此所有函数对象都可以通过委托调用这些默认方法。
var Foo = {
init: function(who) {
this.me = who;
},
identify: function() {
return 'I am ' + this.me;
}
};
var Bar = Object.create(Foo);
Bar.speak = function() {
alert('Hello, ' + this.identify() + '.');
};
var b1 = Object.create(Bar);
b1.init('b1');
var b2 = Object.create(Bar);
b2.init('b2');
b1.speak();
b2.speak();
JavaScript创建UI控件<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.slim.min.js"></script>
<script>
// 控件基类 宽 高 元素
function Widget(width, height) {
this.width = width || 50;
this.height = height || 50;
this.$elem = null;
}
// 渲染方法
Widget.prototype.render = function ($where) {
// 在元素结尾插入元素
if (this.$elem) {
this.$elem.css({
width: this.width + "px",
height: this.height + "px"
}).appendTo($where);
}
};
// Button控件
function Button(width, height, label) {
// 调用“super”构造函数
Widget.call(this, width, height);
this.label = label || "Default";
this.$elem = $("<button>").text(this.label);
}
// 让 Button“继承”Widget
Button.prototype = Object.create(Widget.prototype);
// 重写 render(..)
Button.prototype.render = function ($where) {
//“super”调用
Widget.prototype.render.call(this, $where);
this.$elem.click(this.onClick.bind(this));
};
// Button点击事件
Button.prototype.onClick = function (e) {
alert(`Button ${this.label} clicked!`);
};
$(document).ready(function () {
var $body = $(document.body);
var btn1 = new Button(125, 30, "Hello");
var btn2 = new Button(150, 40, "World");
btn1.render($body);
btn2.render($body);
});<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.slim.min.js"></script>
<script>
// UI组件基类
class Widget {
/**
* 初始化控件
* @param {number} width 宽度
* @param {number} height 高度
* @returns {undefined}
*/
constructor(width, height) {
this.width = width || 50;
this.height = height || 50;
this.$elem = null;
}
/**
* 渲染控件
* @param {Element} $where 父控件
* @returns {undefined}
*/
render($where) {
if (this.$elem) {
this.$elem.css({
width: this.width + "px",
height: this.height + "px"
}).appendTo($where);
}
}
}
// Button组件
class Button extends Widget {
/**
* 初始化控件
* @param {number} width 宽度
* @param {number} height 高度
* @param {string} label 控件内容
* @returns {undefined}
*/
constructor(width, height, label) {
// 调用父类方法
super(width, height);
this.label = label || "Default";
this.$elem = $("<button>").text(this.label);
}
/**
* 渲染控件 重写父类方法
* @param {Element} $where 父控件
* @returns {undefined}
*/
render($where) {
super.render($where);
this.$elem.click(this.onClick.bind(this));
}
// 点击事件
onClick(e) {
alert(`Button ${this.label} clicked!`);
}
}
// 添加UI组件
$(document).ready(function () {
var $body = $(document.body);
var btn1 = new Button(125, 30, "Hello");
var btn2 = new Button(150, 40, "World");
btn1.render($body);
btn2.render($body);
});
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.slim.min.js"></script>
<script>
// UI控件基类
var Widget = {
init: function (width, height) {
this.width = width || 50;
this.height = height || 50;
this.$elem = null;
},
insert: function ($where) {
if (this.$elem) {
this.$elem.css({
width: this.width + "px",
height: this.height + "px"
}).appendTo($where);
}
}
};
// Button继承自Widget
var Button = Object.create(Widget);
// Button控件初始化
Button.setup = function (width, height, label) {
// 委托调用
this.init(width, height);
this.label = label || "Default";
this.$elem = $("<button>").text(this.label);
};
// Button控件创建
Button.build = function ($where) {
// 委托调用
this.insert($where);
this.$elem.click(this.onClick.bind(this));
};
// Button点击事件创建
Button.onClick = function (e) {
alert(`Button ${this.label} clicked!`);
};
$(document).ready(function () {
var $body = $(document.body);
var btn1 = Object.create(Button);
btn1.setup(125, 30, "Hello");
var btn2 = Object.create(Button);
btn2.setup(150, 40, "World");
btn1.build($body);
btn2.build($body);
});
看个例子，我们有两个控制器对象，一个用来操作网页中的登录表单，另一个用来与服务器进行通信。
mock数据
{
"code": 200,
"data": {
"name": "PLee",
"age": 18
},
"msg": "操作成功"
}在传统的类设计模式中，我们会把基础的函数定义在名为Controller的类中，然后派生两个子类LoginController和AuthController，它们都继承自Controller并且重写了一些基础行为：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<script>
// 基类
class Controller {
errors = null;
constructor() {
this.errors = [];
}
// 获取得到的数据
getData(title, data) {
console.log(title, data);
}
// 成功
success(res) {
this.getData("【Success】", res);
}
// 失败
failure(err) {
this.errors.push(err);
this.getData("【Error】", err);
}
}
// 登录
class LoginController extends Controller {
constructor() {
super();
}
// 获取用户名
getUser() {
return document.getElementById("login_username").value;
}
// 获取密码
getPassword() {
return document.getElementById("login_password").value;
}
// 验证 用户名/密码
validateEntry(user, pw) {
user = user || this.getUser();
pw = pw || this.getPassword();
if (!user) {
return this.failure("请输入用户名!");
}
if (!pw) {
return this.failure("请输入密码!");
}
// 如果执行到这里说明通过验证
return true;
}
// 重写基础的 failure()
failure(err) {
super.failure(err);
}
}
// 认证
class AuthController extends Controller {
login = null;
constructor(login) {
super();
this.login = login;
}
// 数据请求
server(url, data) {
return $.ajax({ url, data });
}
// 检查认证
checkAuth() {
var user = this.login.getUser();
var pw = this.login.getPassword();
if (this.login.validateEntry(user, pw)) {
this.server("/check-auth.json", { user, pw })
.then(res => this.success(res))
.fail(err => this.failure(err));
}
}
// 成功
success(res) {
super.success(res);
}
// 失败
failure(err) {
super.failure(err);
}
}
$(document).ready(function () {
$('#login_btn').click(function (e) {
var auth = new AuthController(new LoginController());
auth.checkAuth();
})
})
使用对象关联风格的行为委托来实现：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<script>
// 基础对象
var LoginController = {
errors: [],
// 获取用户名
getUser: function () {
return document.getElementById('login_username').value;
},
// 获取密码
getPassword: function () {
return document.getElementById('login_password').value;
},
// 校验用户名密码
validateEntry: function (user, pw) {
var user = user || this.getUser();
var pw = pw || this.getPassword();
if (!(user && pw)) {
return this.failure('Please enter a username & password!');
} else if (pw.length < 5) {
return this.failure('Password must be 5+ characters!');
}
return true;
},
// 相应结果
showDialog: function (title, msg) {
//给用户显示标题和消息
console.log(title, msg);
},
// 失败
failure: function (err) {
this.errors.push(err);
this.showDialog('Error', 'Login invalid:' + err);
}
}
// 登录对象
//让AuthController委托LoginController
var AuthController = Object.create(LoginController);
AuthController.errors = [];
// 登录
AuthController.checkAuth = function () {
var user = this.getUser();
var pw = this.getPassword();
if (this.validateEntry(user, pw)) {
this.server("/check-auth.json", { user, pw })
.then(res => this.accepted(res))
.fail(err => this.rejected(err));
}
}
// 发送请求
AuthController.server = function (url, data) {
return $.ajax({
url: url,
data: data
})
}
// 成功提示
AuthController.accepted = function (res) {
this.showDialog('Success', res);
}
//失败提示
AuthController.rejected = function (err) {
this.failure('Auth Failed:' + err);
}
// 登录事件
$(document).ready(function () {
$('#login_btn').click(function (e) {
AuthController.checkAuth();
})
})
在ES6中我们可以在任意对象的字面形式中使用简洁方法声明：
匿名函数没有name标识符，会导致：
简洁方法没有第1和第3个缺点，但是无法避免第2个缺点，如果需要自我引用，最好使用传统的具名函数表达式来定义对应的函数，不要使用简洁方法。
var LoginController = {
errors: [],
getUser(){//简洁方法
//...
},
getPassword(){//简洁方法
//...
},
//...
}
var AuthController = {
errors: [],
checkAuth(){//简洁方法
//...
},
server(url, data){//简洁方法
//...
},
//...
}
//把AuthController关联到LoginController
Object.setPrototypeOf(AuthController, LoginController);内省就是检查实例的类型。类实例的内省主要目的是通过创建方式来判断对象的结构和功能。
getPrototypeOf该方法返回指定对象的原型
isPrototypeOf返回一个布尔值，指出对象是否存在于另一个对象的原型链中。
instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上
function Foo() {
// ...
}
Foo.prototype.something = function () {
// ...
}
var a1 = new Foo();
// 之后
if (a1 instanceof Foo) {
a1.something();
}
因为Foo.prototype（不是Foo!）在a1的[[Prototype]]链上
对于“类”设计风格，如果要使用instanceof和.prototype语义来检查本例中实体的关系，那必须这样做：
function Foo() {}
function Bar() {}
Bar.prototype = Object.create(Foo.prototype);
var b1 = new Bar("b1");
// 让Foo和Bar互相关联
Bar.prototype instanceof Foo;// true
Object.getPrototypeOf(Bar.prototype) === Foo.prototype;// true
Foo.prototype.isPrototypeOf(Bar.prototype);// true
// 让b1关联到Foo和Bar
b1 instanceof Foo;// true
b1 instanceof Bar;// true
Object.getPrototypeOf(b1) === Bar.prototype;// true
Foo.prototype.isPrototypeOf(b1);// true
Bar.prototype.isPrototyoeOf(b1);// true显然这是一种非常糟糕的方法。举例来说，（使用类时）你最直观的想法可能是使用Bar instanceof Foo（因为很容易把“实例”理解成“继承”），但是在JavaScript中这是行不通的，你必须使用Bar.prototype instanceof Foo。
instanceof 告诉我们左边要对象，右边要函数。Bar是函数，Bar.prototype是对象
使用对象关联时，所有的对象都是通过[[Prototype]]委托相互关联，下面是内省的方法：
var Foo = {/* .. */};
var Bar = Object.create(Foo);
var b1 = Object.create(Bar);
Foo.isPrototypeOf(b1);// true
Bar.isPrototypeOf(b1);// true
Object.getPrototypeOf(b1) === Bar;// true