js继承4:三种对象声明方式

Posted on   |   In   |  

这两天比较仔细的研究了一下js的继承 发现之前自己写的那个太粗糙了…
这篇说下构造对象的几种方法, 下篇说说最终的选型

一: 字面量声明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 因为是直接={}, 相当于直接new Object(); 所以没有function作用域, 不许用return和this.X
// 只声明一个对象时适用
var user0 = {
    name: "user0",
    age: 0,
    getName: function() {
        return this.name;
    }
    // 不能:
    // return 
    // this.name = "user111"
}
var user1 = new Object({
    name: "user1",
    age: 1,
    getName: function() {
        return this.name;
    }
});

二: function定义(无return), new构造

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// function有自己作用域, 可以this和return
  function User2(age) {
      //1 非静态
      //1.1: private属性
      var private_age = 12;
      private_age_NO_VAR = 100;//没有var也一样
      // private方法
      var private_IsChild = function(_age) {
          return _age < 18;
      };
      function private_NoUse(a) {}; //其实和private_IsChild等价
      //1.2: 对象内public属性
      this.public_Name = "user(对象).name";
      this.public_age = age;
      //public方法, 通过这暴露private方法
      this.public_isChild = private_IsChild(this.public_age  );//参数里私有属性不能加"this":private_age
  }
  //2 静态属性
  User2.public_static_Name = "User2.name";
  User2.public_static_Fun = function(){
      console.log("静态方法public_static_Fun2");
  };
  //3 原型属性
  User2.prototype = {
      ptt_Name: "User2.prototype.name",
      ptt_getPptName: function() {
          console.log("类原型方法");
          console.log("对象private属性" + this.private_age);
          console.log("对象public属性" + this.public_age);
      }
  };
  var user2 = new User2(20);
  console.group("2:function方法定义, new构造对象");
      console.log(user2.private_IsChild); //undefined private属性访问不到
      console.log("2.1_"+user2.public_isChild); //public属性可访问到
      console.log(User2.public_static_Name); 
      console.log(user2.ptt_Name); 
  console.groupEnd();

三:带return的情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// function中return的都是public对象, 否则都是private
  // return中对象从新绑定this
  // 最重要的是原型会失效...
  function User3(age) {
      //1 非静态 
      //1.1: private属性
      var private_age = 12;
      this.public_age = age;
        
      var fun = function(param){
          //这里访问不到this.public_age, 但可以访问到this.public_age_2
          //因为this换到return的新对象里
          return param - private_age - this.public_age_2;
      }
      //1.2: public属性
      //有return以后, 所有非return的都变成私有属性.
      //并且this更换到return的对象里
      return {
          public_age_1 : private_age,
          public_age_2 : this.public_age,
          fun : fun
      }
  }
  //2 静态属性
  User3.public_static_Name = "User3.public_static_Name";
  User3.public_static_Fun = function(){
      console.log("静态方法public_static_Fun");
  };
  //3 原型属性
  User3.prototype = {
      ptt_Name: "User3.prototype.name",
      ptt_getPptName: function() {
          console.log("类原型方法");
          console.log("对象private属性" + this.private_age);
          console.log("对象public属性" + this.public_age_1);
      }
  }
  var user3 = new User3(20);
  console.group("3:function方法定义(带return), new构造对象");
      console.log(user3.private_age); 
      console.log(user3.public_age); //非return的属性都访问不到了
      console.log(user3.public_age_1);//仅return的是public
      console.log(User3.public_static_Name);
      console.log(user3.ptt_Name); //原型失效
  console.groupEnd();