zoukankan      html  css  js  c++  java
  • JavaScript面向对象(封装)

    阮一峰的网络日志

    1.生成实例对象的原始模式

     var People = {
        name : '',
        age : ''
     }
    

    根据这个原型对象生成两个实例对象

     var people1 = {};
        people1.name = 'jack';
        people1.age = 18;
     var people2 = {};
        people2.name = 'lucy';
        people2.age = 17;
    

    这即为简单的封装,把两个属性封装在一个对象里面

    缺点:
    1.如生成多个实例,写起来麻烦。
    2.实例与原型之间看不出联系

    2.原始模式改进

    function People(name,age) {
        return {
            name:name,
            age:age
        }
    }
    

    然后生成实例,等于调用函数

     var people1 = People('jack',18);
     var people2 = People('lucy',17)
    

    缺点:people1与people2之间没有内在联系,不能反映出它们是一个原型对象的实例

    3.构造函数模式

    所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。

    function People(name,age) {
        this.name = name;
        this.age = age
    }
    

    生成实例对象

    var people1 = new People('jack',18);
    var people2 = new People('lucy',17);
    alert(people1.name);    //jack
    alert(people1.age);     //18
    

    people1和people2会自动含有一个constructor属性,指向它们的构造函数

    alert(people1.constructor == People); //true
    alert(people2.constructor == People); //true
    

    4.构造函数模式的问题

    构造函数存在一个浪费内存的问题

    function People(name,age) {
        this.name = name;
        this.age = age;
        this.job = 'web';
        this.say = function(){
            alert('你好')
        }
    }
    

    生成实例

    var people1 = new People('jack',18);
    var people2 = new People('lucy',17);
    alert(people1.job);    //web
    people1.say();     //你好
    

    这样有一个弊端,对于每一个实例对象,job属性和say()方法都是一样的内容,每一次生成一个实例,都是重复的内容,多占内存。

    alert(people1.say == people2.say); //false
    

    5.Prototype模式

    Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。

    这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。

    function People(name,age) {
        this.name = name;
        this.age = age
    }
    People.prototype.job = 'web';
    People.prototype.say = function(){
        alert('你好')
    }
    

    生成实例

    var people1 = new People('jack',18);
    var people2 = new People('lucy',17);
    alert(people1.job);    //web
    people1.say();     //你好
    

    这时所有的job属性和say()方法都是同一个内存地址

  • 相关阅读:
    数据与C
    队列的基本实现代码
    栈的基本实现代码
    c中const定义的问题
    微博登录报错 sso package orsign error
    透明度修改
    <大话设计模式>工厂模式,策略模式
    弹键盘动画
    压缩图片,直接使用大图,在小控件上会有毛边
    删除数组中的元素
  • 原文地址:https://www.cnblogs.com/loveyt/p/9593884.html
Copyright © 2011-2022 走看看