zoukankan      html  css  js  c++  java
  • JS-面向对象编程

    JS-面向对象编程

     

    工厂模式动态创建对象


               creatMain(name, age, company) {
                   let people = new Object()
                   people = {
                       name: name,
                       age: age,
                       company: company
                  }
                   return people
              },
               open(){
                   for (var a = 1; a < 10; a++) {
                   const ldq = 'ldq_'+a;
                   console.log( window[ldq]  = this.creatMain('ldq_'+a, a, '格微_'+a))
                }
              }

     

    判断属性是不是自有属性

    judgePro(obj,pro){
       if(pro in obj){
           if(obj.hasOwnProperty(pro)){
               console.log(pro+"属性是对象的自有属性")
          }else{
               console.log(pro+"属性是对象继承来的属性")
          }
      }else{
           console.log(pro+"属性不在对象里面")
      }
    }

     

    原型模式的核心概念

    //原生
    Object.defindProperty(Person.prototype,'grulFriend',{
      //对象名称 //属性名称
       value:['石原里美','新垣结衣','陈俞绮'],
       enumerable:false,//是否可枚举
       configurable:false,//是否可配置
       writeable:false,//是否可写
    })
    //升级

    组合模式

    //创建自定义类型的最常见方式,就是组合使用构造函数模式及与原型模式
    //构造函数模式用于定义示例属性, 二`原型模式用于定义方法和共享的属性, 结果, 每个是实例都会有自己的一份实例属性的副本, 但同时有共享着对方法的引用, 最大限度的节省了内存
    //另外,这种混合模式还支持想构造函数传递参数; 可谓是集两种模式之长


        //构造函数模式
           function Person(name, age) {
               this.name = name
               this.age = age
               this.girlFriend = ["石原里美", "新垣结衣"]
               this.sayName = function () {
                   console.log(this.name)
              }
          }
           let wanzhang = new Person("万章", 10)
           let yinshi = new Person("银时", 20)

           //原型模式
           function Person2(){}
           Person2.prototype = {
               constructor:Person2,
               name:'万章',
               age:'11',
               girlFriend:['全智贤','金秀贤','今明恩'],
               company:'潭州教育',
               sayName:function(){
                   console.log(this.name)
              }
          }
           let wanzhang2 = new Person2()
           let yinshi2 = new Person2()

           //组合模式
           function Person3(name ,age){
               this.name = name
               this.age = age
               this.girlFriend = ["石锅拌饭", "臭豆腐" ,"口水鸡"]
          }
           Person3.prototype = {
               constructor: Person,
               company:'潭州教育',
               sayName: function(){
                   console.log(this.name)
              }
          }
           let wanzhang3 = new Person3("万章3", 13)
           let yinshi3 = new Person3("银时3", 23)

    // 这种构造函数与原型混成的模式, 是目前在ECMAScript中使用最广泛、认同度最高的一种创建自定义类型的方法. 可以说, 这是用来定义引用类型的一种默认模式
    // 组合模式注意点:
    // .对于对象内后期需要修改的引用类型的继承的值, 这个值以构造函数的this.属性名称的方式来思想基础, 这样可以避免某个实例操作继承来的对象而引起其他实例的变化

     

    动态原型模式

    // 动态原型模式把所有信息都很早在了构造函数中, 而通过在构造函数中初始化原型(仅在必要的情况下),又保持了同时使用构造函数和原型的优点. 可以通过检查某个应该存在的方法是否有效, 来决定是否余姚初始化原型

       // 动态原型模式
       function Person(name ,age){
           this.name = name
           this.age = age
           this.company = "潭州教育"
           if(typeof this.sayName !== "function" ){
               Peoson.prototype.sayName = function(){
                   console.log(this.name)
              }
          }
      }
       let wanzhang = new Person("万章", 18)
       let yinshi = new Person("银时", 20)

    // 在这里只有sayName()方法不存在的情况下, 才会将它添加到原型中, 这段代码只会在初次调用构造函数时才会执行. 此后, 原型已经完成初始化, 不需要在做什么修改了

       

     

    寄生构造函数模式

    //这种模式的基本思想时创建一个函数, 改函数的作用仅仅是封装创建对象的代码, 然后再返回新创建的对象; 但从表面上看, 这个函数又很像是典型的构造函数

    //寄生构造函数模式

    function Person(name, age){
       var o = new Object()
       o.name = name
       o.age = age
       o.company = "潭州教育"
       o.sayName = function(){
           alert(this.name)
      }
       return o
    }
    let wanzhang = new Person("万章", 18)
    let yinshi = new Person("银时", 20)


    //再这个例子中, Person 函数创建了一个新对象, 并以相应的属性和方法初始化对象, 然后又返回了这个对象. 除了使用new 操作符并把使用的包装函数叫做构造函数之外, 这个模式跟工厂模式其实一模一样

     

     

     

     

     

    
    

     

    未来web前端架构师
  • 相关阅读:
    js学习笔记
    Bootstrap学习笔记
    css学习任务二:切图写代码
    九宫格改进
    js学习笔记
    XHTML复习笔记
    html基础知识复习笔记
    css学习任务一:绘制九宫格
    如何不使用第三个变量来交换两个数的值
    算术右移与逻辑右移
  • 原文地址:https://www.cnblogs.com/swalT-link/p/13736723.html
Copyright © 2011-2022 走看看