在这之前先说一下原型的基本知识。
什么是原型?简单来说就是一个对象内部关联另外一个对象,本质来说就是对象与对象之间的关联;
一个对象本身没有属性或者方法会到原型对象上查找。
这里每个例子会通过构造函数,class和行为委托来不同实现,不过不会评论class,是否使用class取决于你的观点。
先看一个例子,构造函数写法
function Foo(name) {
this.name = name;
}
Foo.prototype.age = function() {
console.log(this.name);
};
function Fn(name) {
Foo.call(this);
this.name = name;
}
Fn.prototype = Object.create(Foo.prototype);
Fn.prototype.constructor = Fn.prototype;
Fn.prototype.set = function(value) {
this.name = value;
};
var a1 = new Fn('zhangsan');
a1.age(); //zhangsan
var a2 = new Fn('lisi');
a2.set('xiaowu');
a2.age(); //xiaowu
class写法
class Foo {
constructor(name) {
this.name = name;
}
age() {
console.log(this.name);
}
}
class Fn extends Foo {
constructor(name) {
super();
this.name = name;
}
set(value) {
this.name = value;
}
}
var a1 = new Fn('zhangsan');
a1.age(); //zhangsan
var a2 = new Fn('lisi');
a2.set('xiaowu');
a2.age(); //xiaowu
行为委托写法
var Foo = { const(name) { this.name = name; }, age() { console.log(this.name); } }; var Fn = Object.create(Foo); Fn.set = function (value) { this.name = value; }; var a1 = Object.create(Fn); a1.const('zhangsan'); a1.age(); //zhangsan var a2 = Object.create(Fn); a2.set('xiaowu'); a2.age(); //xiaowu
可以看到比起构造函数,行为委托是通过原型链来实现的,他值关心一件事情,对象指向的关系。
再来看一个复杂一些的例子,为dom添加样式。
function Foo(value) {
this.dom = value;
}
Foo.prototype.div = function () {
var div = document.createElement(this.dom);
this._dom = document.body.appendChild(div);
return this._dom;
};
Foo.prototype.get = function () {
return this._dom;
};
function Fn(text, cssText) {
Foo.call(this, 'div');
this.text = text;
this.cssText = cssText;
}
Fn.prototype = Object.create(Foo.prototype);
Fn.prototype.constructor = Fn.prototype;
Fn.prototype.set = function () {
this.div();
var div = this.get();
div.textContent = this.text;
Object.keys(this.cssText).forEach((name) => {
div.style.cssText += `${name}: ${this.cssText[name]}`;
});
};
var a = new Fn('hi', {color: 'red', "font-size": '16px'});
a.set();
class写法
class Foo {
constructor(value) {
this.dom = value;
}
div() {
var div = document.createElement(this.dom);
this._dom = document.body.appendChild(div);
return this._dom;
}
get() {
return this._dom;
}
}
class Fn extends Foo {
constructor(text, cssText) {
super('div');
this.text = text;
this.cssText = cssText;
}
set() {
super.div();
var div = super.get();
div.textContent = this.text;
Object.keys(this.cssText).forEach((name) => {
div.style.cssText += `${name}: ${this.cssText[name]}`;
});
}
}
var a = new Fn('hi', { color: 'red', "font-size": '16px' });
a.set();
行为委托写法
var Foo = {
const(value) {
this.dom = value;
},
div() {
var div = document.createElement(this.dom);
this._dom = document.body.appendChild(div);
return this._dom;
},
get() {
return this._dom;
}
};
var Fn = Object.create(Foo);
Fn.constructor = function (text, cssText) {
this.const.call(this, 'div');
this.text = text;
this.cssText = cssText;
};
Fn.set = function () {
this.div();
let div = this.get();
div.textContent = this.text;
Object.keys(this.cssText).forEach((name) => {
div.style.cssText += `${name}: ${this.cssText[name]}`;
});
};
var a = Object.create(Fn);
a.constructor('hi', { color: 'red', "font-size": '16px' });
a.set();
注意点:
1.在使用行为委托时要避免标识符的重名,因为行为委托是基于原型链,不同于“类”的设计模式,可以构造函数与实例对象同时定义相同的名称的标识符。
2.两个委托对象无法互相委托,假设一个a对象关联b对象,然后b对象再关联a对象,如果两个引用了一个两个对象都不存在的属性或者方法,那么就会在原型链上形成无限循环。
来源:https://www.cnblogs.com/boses/p/9575247.html
通过js实现网页弹出各种形式的窗口,常用的:弹出框、对话框、提示框等。弹出对话框并输出一段提示信息 、弹出一个询问框,有确定和取消按钮 ,利用对话框返回的值 (true 或者 false) 、弹出一个输入框,输入一段文字,可以提交、window.open 弹出新窗口的命令
原理和 base64 是一样的,ASCII 共有94个可打印字符,base64 使用了其中 64 个,base91 使用了 91 个。
一个句柄是指使用的一个唯一的整数值,即一个4字节(64位程序中为8字节)长的数值,来标识应用程序中的不同对象和同类中的不同的实例。
Js支持“=”、“==”和“===”的运算符,我们需要理解这些 运算符的区别 ,并在开发中小心使用。它们分别含义是:= 为对象赋值 ,== 表示两个对象toString值相等,=== 表示两个对象类型相同且值相等
作用域外,无法引用作用域内的变量;离开作用域后,作用域的变量的内存空间会被清除,比如执行完函数或者关闭浏览器,作用域与执行上下文是完全不同的两个概念。我曾经也混淆过他们,但是一定要仔细区分。JavaScript代码的整个执行过程,分为两个阶段,代码编译阶段与代码执行阶段。
接口返回的是int类型的秒数,在前端显示要求拼接为时分秒显示,这篇文章主要讲解实现js秒数转换成时分秒的方法。
通过统计数据库中的1000多个项目,我们发现在 JavaScript 中最常出现的错误有10个。下面会向大家介绍这些错误发生的原因以及如何防止。对于这些错误发生的次数,我们是通过收集的数据统计得出的。
10个JavaScript难点包括:立即执行函数,闭包,使用闭包定义私有变量,prototype,模块化,变量提升,柯里化,apply, call与bind方法,Memoization,函数重载
你有没有在面试中遇到特别奇葩的js隐形转换的面试题,第一反应是怎么会是这样呢?难以自信,js到底是怎么去计算得到结果,你是否有深入去了解其原理呢?下面将深入讲解其实现原理。
JavaScript中的特殊运算,字符,true,false参与运算结果会怎么样?打开控制台。这会允许你再你的浏览器里输入下面所有的代码,所以你可以实时的看到发生什么了。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!