01.原型属性方法的简写
原写法:
//切换功能
ChangeTab.prototype.onTab = function () {
//1.遍历li数组 给每一个绑定点击事件
let _this = this //保存事件对象
for (let i = 0; i < this.liEles.length; i++) {
this.liEles[i].addEventListener('click', function () {
//2.清除所有li的选中样式 =>this绑定事件代表事件源
_this.onClear()
//3.给选中的li设置选中样式
this.classList.add('active')
//4.给区块换内容
_this.divEle.innerHTML = this.innerHTML
})
}
}
//清除所有选项卡的样式-方法
ChangeTab.prototype.onClear = function () {
//2.清除所有li的选中样式 =>this绑定事件代表事件源
for (let j = 0; j < this.liEles.length; j++) {
this.liEles[j].classList.remove('active')
}
}
由于原写法不好看,原型属性方法的简写如下:
类似简单对象的写法:
ChangeTab.prototype = {
onTab: function () {
// 1.遍历li数组 给每一个绑定点击事件
let _this = this //保存事件对象
for (let i = 0; i < this.liEles.length; i++) {
this.liEles[i].addEventListener('click', function () {
//2.清除所有li的选中样式 =>this绑定事件代表事件源
_this.onClear()
//3.给选中的li设置选中样式
this.classList.add('active')
//4.给区块换内容
_this.divEle.innerHTML = this.innerHTML
})
}
},
onClear: function () {
//2.清除所有li的选中样式 =>this绑定事件代表事件源
for (let j = 0; j < this.liEles.length; j++) {
this.liEles[j].classList.remove('active')
}
}
}
02.原型链【面试题】
1.原型链是什么?:两个或两个以上的原型,通过隐藏原型__proto__属性链接起来,形成的链式结构称为原型链
2.原型链作用?:访问对象属性或方法时,实例对象会沿着原型链上的所有原型进行查找,至到根null为止
3.
当访问一个对象的某个属性或方法时,会先在这个对象本身上查找,
如果没有找到,则会去它的__proto__([[prototype]])隐式原型上查找,即它的构造函数的prototype,
如果还没有找到就会再在构造函数的prototype的__proto__中查找,
这样一层一层向上查找就会形成一个链式结构,我们称为原型链。
4.隐藏原型__proto__
每个实例对象都有一个__proto__属性指向它的原型对象
<strong>每个对象都有一个__proto__属性指向它的原型对象</strong>
[[prototype]]
prototype是构造函数都有的属性,称为显示原型。___proto__是每个对象都有的属性,又称为隐式原型。
但是,___proto__不是一个规范属性,只是部分浏览器实现了此属性,对应的标准属性是[[Prototype]]。
03.class类【es6新增】
class类:ES6 新增定义类的关键字
真正的面向对象语言里,
定义对象之前,先创建对象类型
类相当于对象的模板,也相当于ES5构造函数
class语法:
class 类名{
//类体
//构造器
constructor(){
//定义对象属性
this.属性名 = 值
}
//对象方法 => 相当于原型对象上定义的方法
方法名(){
}
}
tab选项卡优化
04.一切即对象
对象
内置对象
简单对象Object
数组 Array
字符串String
自已创建的对象
Person.prototype.__proto__ === Object.prototype
Phone.prototype.__prot__ === Object.prototype
所有对象都指向Object.prototype
把Object称为其它所有对象的根对象祖先
string -> String
number -> Number
boolean -> Boolean
函数对象
数据类型 Function
构造函数方式
let fn = new Function('console.log('fn')')