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

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

如何使用对象

定义两个工具包

 /*产品工具包 - 保存和产品有关的工具*/
    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)

  

时间: 2024-10-22 03:31:35

JS高级学习路线——面向对象基础的相关文章

JS高级学习路线——面向对象进阶

构造函数进阶 使用构造函数创建对象 用于创建对象 其除了是一个函数之外,我们又称之为构造对象的函数 - 简称构造函数 function Product(name,description){ //属性 this.name=name; // 属性 this.description = description //方法 又称方法属性 万物皆属性 this.buy=function(){ alert('buy') } } //会拷贝一份 var p1 = new Product() var p2 = n

JS高级学习总结--面向对象

一.对象的四种创建方式 1)直接量 var Student = {name:'小明',age:18}; 2)通过new关键字加Object()构造函数 var student = new Object() student.id = 10; student.name = '王铁锤'; student.age = 18; 缺点:使用同一个接口创建很多对象,会产生大量的重复代码. 3)封装工厂函数 为了减少重复代码,对上述代码进行封装 4)自定义构造函数 /* * 这种方式调用构造函数实际上会经历以下

ios学习路线_OC基础语法

OC是面向对象的语言,同java,python等等一样. OC中的变量类命名同其他对象语言基本类似,写法遵循驼峰法则 一般命名用到的是下划线,字母,开头字符非数字,网上很多有说也可以$符号,其实命名中基本不会用到这个 OC里面的关键字也不多,如图: OC中分基本数据类型和指针类型(即指对象类型) 那么一些基本类型的范围值和写法,这里不一一说,网上太多了,随便百度下 下面废话也不多说,直接给个网上的ppt说明吧 其实写过面向对象语言的朋友,基本上这块so easy 这里可以下载oc的基础部分 io

大话设计模式学习笔记——面向对象基础

前言 好记性不如烂"笔头"系列--大话设计模式学习笔记 目录 面向对象基础 面向对象基础 什么是类与实例 一切事物皆为对象,即所有的东西老师对象,对象就是可以看到.感觉到.听到.触摸到.尝到.或闻到的东西.准确地说,对象是一个自包含的实体,用一组可识别的特性和行为来标识.面向对象编程,英文叫 Object-Oriented Programming,其实就是针对对象来进行编程的意思.类就是具有相同属性和功能的对象的抽象集合.实例就是一个真实的对象.比如我们属于'人'类,而个人就是'人'类

JS高级---学习roadmap---5 parts

JS高级---学习roadmap---5 parts part 1-3 part 4-5 原文地址:https://www.cnblogs.com/jane-panyiyun/p/12099622.html

java基础学习05(面向对象基础01--类实例分析)

面向对象基础01(类实例分析) 实现的目标 1.如何分析一个类(类的基本分析思路) 分析的思路 1.根据要求写出类所包含的属性2.所有的属性都必须进行封装(private)3.封装之后的属性通过setter和getter设置和取得4.如果需要可以加入若干构造方法 5.再根据其它要求添加相应的方法6.类中的所有方法都不要直接输出,而是交给被调用处调用 Demo 定义并测试一个名为Student的类,包括属性有"学号"."姓名"以及3门课程"数学".

java基础学习05(面向对象基础02)

面向对象基础02 实现的目标 1.String类的使用 2.掌握this关键字的使用3.掌握static关键字的使用 String类 实例化String对象一个字符串就是一个String类的匿名对象,就是已经开辟了堆内存空间的并可以直接使用的对象.1.采用直接赋值的方式进行操作. String name = "zhangsan"; 使用这种方式,如果一个字符串已经被一个名称所引用,则以后再有相同的字符串声明时,就不会再开辟内存空间.2.直接调用String类的构造方法(public S

Java学习 &#183; 初识 面向对象基础一

面向对象基础 1.1面向过程与面向对象的区别 面向过程和面向对象二者都是思考问题的方式,再简单的事物时,可以线性思考时使用面向过程,但当事物较为复杂时,只能使用面向对象设计.但二者并不是对立的,在解决复杂问题时,通过面向对象的方式把握事物之间复杂的关系,方便分析整个系统:具体到微观时,仍然使用面向过程设计. 以开车为例,面向过程中思考 有一辆车 驾驶员上车 挂挡踩离合 车开动 而面向对象中思考 有车.驾驶员这两个个对象 车拥有挂挡离合这几个方法(还拥有属性,如性能外观) 人拥有挂挡踩离合这几个方

JS高级学习历程-15

昨天内容回顾 面向对象的私有成员.静态成员 私有成员:在构造函数里边定义局部变量,就是私有成员. 静态成员:在js里边,函数就是对象,可以通过给函数对象声明成员方式声明静态成员. 原型继承 关键字:prototype 单一成员继承:  函数.prototype.成员名称= 值; 对象继承:函数.prototype = 对象; 原型链继承:许多构造函数可以一一继承,形成一个继承链条,这个链条就是“原型链” 原型链的顶端是Object,对象可以访问的属性constructor.方法 hasOwnPr