JS 面向对象与原型(一)

面向对象的语言有一个标志,就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象,而ECMAScript中没有类的概念。

ECMA-262 把对象定义为 :“无序属性的集合,其属性可以包含基本值,对象或函数。” 严格来说,这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字,而每个名字都映射到一个值。想象成,一组名值对,值可以是数据或函数。

创建对象:
方法一: 一次只能创建一个对象,当想创建另一个属性方法相同的对象时,会产生大量重复性的代码。

        var box = new Object();
        box.name = "Lee";
        box.age = 100;
        box.run = function () {
            return this.name + this.age + "运行中...";
        }
        alert(box.run());
        alert(this.name);

方法二:
工厂模式:解决了实例化对象产生大量重复的问题,但,存在识别问题,即,无法识别box1,box2 到底属于哪个对象的实例。


  function createObject(name, age) {  // 集中实例化的函数
        var obj = new Object();  // 创建对象
        obj.name = name;         // 添加属性
        obj.age = age;           // 添加属性
        obj.run = function () {  // 添加方法
            return this.name + this.age + "运行中...";
        }
        return obj;               // 返回对象引用
    }

    var box1 = createObject("Qiqi", 29);  // 创建第一个对象
    var box2 = createObject("tianyu", 25);// 创建第二个对象
    alert(box1.run());               // 打印第一个对象的run()
    alert(box2.run());               // 打印第二个对象的run()

方法三:
构造函数方式 : 既解决了重复实例化的问题,又解决了对象识别的问题

   function Box(name, age) {       // 创建一个对象,所有构造函数的对象就是Object
        this.name = name;           // 添加一个属性
        this.age = age;
        this.run = function () {    // 添加一个方法
            return this.name + this.age + "运行中...";
        };
    }

   function Desk(name, age) {       // 创建一个对象,所有构造函数的对象就是Object
        this.name = name;           // 添加一个属性
        this.age = age;
        this.run = function () {    // 添加一个方法
            return this.name + this.age + "运行中...";
        };
    }
    var box1 = new Box("Lee", 100);  // 实例化
    var box2 = new Box("Jack", 200); // 实例化
    var box3 = new Desk("KKK",300); // 实例化

    alert(box1.run());
    alert(box2.run());

    alert(box1 instanceof Box);  // true;
    alert(box2 instanceof Box);  // true;
    // 对比可知,box3 是属于 Desk 的对象的引用,而不是 Box , 解决了识别问题
    alert(box3 instanceof Desk); // true;
    alert(box3 instanceof Box);   // false   

构造函数方式与工厂模式的不同之处:

  1. 构造函数没有 new Object , 但它后台会自动创建,并传给一个对象 var obj = new Object();
  2. this 就相当于 obj
  3. 构造函数不需要返回对象引用,后台自动返回

构造函数规范:

  1. 构造函数也是函数,但函数名第一个字母大写
  2. 必须 new 构造函数名(), new Box(), 而这个 Box 第一个字母也是大写的
  3. 必须使用 new 运算符

调用构造函数实际经历的过程:

  1. 创建一个新对象
  2. 将构造函数的作用域赋给这个新对象(因此,this就指向了这个新对象)
  3. 执行构造函数中的代码
  4. 返回新对象
    var o = new Object();
    Box.call(o, "abc", 10);
    alert(o.run());

也可以使用call()或apply() 在某个特殊对象的作用域中调用Box()函数。这里是在对象o的作用域中调用的,因此,调用后o就拥有了所有属性和run()方法

再来看一个问题:

   function Box(name, age) {
        this.name = name;
        this.age = age;
//        this.run = function () {
//            return this.name + this.age + "运行中...";
//        }
        this.run = new Function("return this.name + this.age + '运行中...'");
    }


    var box1 = new Box("Lee", 100);
    var box2 = new Box("Lee", 100);
    alert(box1.run()); // 正常执行
    alert(box1.run() == box2.run()); // true  方法的值相等
    alert(box1.run == box2.run);     // false  引用地址不同

以上代码可以看出,也可以使用 new Function() 的方法来代替 ,说明了 run() 是引用类型,值相等,而引用地址不等,说明值存储在堆内存中,引用地址存储在栈内存中,具有唯一性。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容