JS高级学习路线——面向对象基础

Posted 2020-09-09

比较传统和对象的编程方式

如何使用对象

定义两个工具包

 /*产品工具包 - 保存和产品有关的工具*/
    var product={
        name:‘iphone8‘,
        description:‘各地区货源已陆续到库，我们将在十月十号左右发货，对于此次延迟发货给您带来的不便表示致歉，望您谅解。‘,
        price:6660,
        /*绑定元素*/
        bindDom:function(){},
        /*绑定事件*/
        bindEvents:function(){},
        /*立即购买，暂时不考虑里面的代码是如何写的*/
        buy:function(){},
        /*加入到购物车*/
        addCart:function(){}
    }

 

 /*购物车工具包 - 保存和购物车有关的工具*/
    var cart={
        name:‘购物车‘,
        products:[],
        price:5000,
        sum:0,
        /*绑定元素*/
        bindDom:function(){},
        /*绑定事件*/
        bindEvents:function(){},
        /*结算*/
        cartSum:function(){

        }
    }

绑定产品模块元素

window.onload=function(){
        /*绑定产品模块元素*/
        product.bindDom()
        /*绑定购物车模块元素*/
        cart.bindDom()
        /*绑定产品模块事件*/
        product.bindEvents()
        /*绑定购物车模块事件*/
        cart.bindEvents()
    }

提炼对象的属性和方法

产品对象
js使用函数+this的形式实现对象 - 这个时候的函数称之为构造函数
js中我们一般将属性放在上面的构造函数中，一般将方法放在下面的原型中
本质：其实是两个对象 上面叫构造对象，下面叫原型对象 --- 简称双对象定义对象法则 或者 双函数定义对象法则

---

代码实现

写法

function 构造函数(){
            this.属性
        }
构造函数.原型.方法 = function(){};


var 对象1 = new 构造函数();
对象1.方法();

产品对象

//产品对象
    /*对象内如何使用对象的属性和方法：this，对象外如何使用：先实例化，后用点语法*/
    function Product(name,price,description,youhuijia,zhekou,sales) {
        /*属性 行为*/
        this.name =name;
        this.price=price;
        this.description = description;
        this.youhuijia=youhuijia;

        /*和产品对象相关的dom，统一管理，以后使用*/
        this.doms={
            btn:document.getElementById(‘btn‘),
            name:document.getElementById(‘pname‘),
            price: document.getElementById(‘pprice‘),
            sum:document.getElementById(‘sum‘)
        }
    }
    Product.prototype={
        getPrice:function() {
            return this.price
        },
        addToCart:function(){
            alert(‘将物品添加到购物车‘)
        },
        bindDom:function(){
            this.doms.name.innerhtml=this.name
            this.doms.price.innerHTML=this.price
            this.doms.des.innerHTML=this.description
        },
        bindEvents:function(){
            /*this that之争*/
            var that = this;
            this.doms.btn.onclick = function(){
                that.addToCart()
            }
        }
    }

逗逗加加法则和代码拼接　　

  Product.prototype={
         bindDom:function(dom){
           var str = ‘‘
           str+=‘<h1 id="pname">‘+this.name+‘</h1>‘
           str+=‘<div id="pdes">‘+this.description+‘</div>‘
           str+=‘<div >已售：<strong id="psales">‘+this.sales+‘</strong></div>‘
           str+=‘ <div>原价：<strong id="pprice">‘+this.price+‘</strong>元</div>‘
           str+=‘<div>优惠价：<strong id="pyouhui">‘+this.youhuijia+‘</strong>元</div>
           str+=‘<div>折扣：<strong id="pzhekou">‘+this.zhekou+‘</strong>折</div>‘
           dom.innerHTML = str;
      }
}        

---

面向对象和列表

    var product1 = new Product()
    product1.name = ‘SKII‘
    product1.price = 1111
    product1.zhekou = 3.5
    product1.image = ‘img/boutque10_r2_c2.jpg‘

    var product2 = new Product()
    product2.name = ‘??????‘
    product2.price = 1111
    product2.zhekou = 3.5
    product2.image = ‘img/boutque10_r2_c2.jpg‘

    var product3 = new Product()
    product3.name = ‘???‘
    product3.price = 1111
    product3.zhekou = 3.5
    product3.image = ‘img/boutque10_r2_c2.jpg‘

    var products = [product1,product2,product3]

    var str=‘‘
    for(var i = 0,len=products.length;i<len;i++) {
        str+= products[i].bindDom()
    }
    var container = document.getElementById(‘container‘)
    container.innerHTML=str

　　

---

面向对象的字面量形式

json字面量其实字面量的一种简化写法

    // 这是JSON字符串
    var foo = ‘{ "prop": "val" }‘;
    // 这是对象字面量
    var bar = { "prop": "val" };
    // 这是JSON字符串，比如从AJAX获取字符串信息
    var my_json_string = ‘{ "prop": "val" }‘;
    // 将字符串反序列化成对象
    var my_obj = JSON.parse( my_json_string );
    alert( my_obj.prop == ‘val‘ ); //  提示 true, 和想象的一样!
    // 将对象序列化成JSON字符串
    var my_other_json_string = JSON.stringify( my_obj );

根据某个元素中class为 clasName的所有元素

    function getByClass(obj,classname){
        var elements = obj.getElementsByTagName(‘*‘);
        var result = [];
//    匹配字符串开头或者空格
        var pattern = new RegExp( ‘^|\\s‘+ classname + ‘\\s|$‘);
        for(var i = 0; i < elements.length; i++){
            if(pattern.test(elements[i].className)){
                result.push(elements[i]);
            }
        }
        return result
    }
    var div = document.getElementById(‘div‘)
    var length = getByClass(div,‘red‘).length
    console.log(length)