0
点赞
收藏
分享

微信扫一扫

ES6-class类打卡

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')')

举报

相关推荐

0 条评论