1. 程式人生 > >JavaScript物件學習 建構函式 包裝類 練習題

JavaScript物件學習 建構函式 包裝類 練習題

// 物件的增刪改查

// 定義一個物件
var obj = {
    name: 'zhangsan',
    age: 18
};

// 增
obj.sex = 'male';

// 改
obj.age = 20;

// 查
console.log(obj.name);

// 刪
delete obj.age;

物件建立方法

// 1. 物件字面量/物件直接量
var obj = {} // plainObject

// 2.建構函式
    // 1) 系統自帶的建構函式 Object()
    var obj2 = new Object(); // 每執行一次就生產一個物件,每次生產的物件都一樣,但相互獨立
    obj2.name = 'xiaozhang';
    obj2.fn = function(){};
    // 2) 自定義建構函式
    // 建構函式結構上和函式沒有任何分別,構造一個物件需要用new 操作符。
    // 為了區別建構函式和函式有區別,人為的定義了一個程式碼規範 用大駝峰式命名規則
    function Person() {
        
    }
    var person1 = new Person();

建構函式內部原理

  1. 在函式體最前面隱式加上this = {}
  2. 執行this.xxx = xxx;
  3. 隱式返回this
function Student(name, age, sex) {
    // var this = {};
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.say = function (){
        console.log(this.name);
    }
    // return this; 
}
console.log(new Student('xiaoming',18,'male').name)

如果用建構函式,要更改返回值 必須為物件(陣列,function,{}),其他返回值無效(number,Boolean。。)

var Person(name, height) {
    this.name = name;
    this.height = height;
    return {};
}
var person1 = new Person('xiaowang',180);
console.log(person1); // object {}

var Person2(name, height) {
    this.name = name;
    this.height = height;
    return 123; // 無效 依然返回this
}
var person2 = new Person2('xiaowang',180);
console.log(person1); // person2 {name: 'xiaowang', height: 180}

包裝類

var num = new Number(123);
var str = new String('abcd');
var bol = new Boolean('true');

// undefined null 不能有屬性

// 原始值不能有屬性方法 使用屬性方法會進行一個包裝類
var str = 'abc';
console.log(str.length); // 3

var num = 3;
num.len = 1;
// new Number(3).len = 1; delete
// 隱式進行包裝類操作,然後刪除

var str2 = 'abcd';
str.length = 2;
console.log(str); // 'abcd'

// str2 是原始值 不能有屬性方法
// new String('abcd').length = 2 然後系統再 delete 不影響原來的值
  • 練習題1
var str = 'abc';
str += 1; // 'abc1'
var test = typeof str; // 'String'
if(test.length == 6) { // true
    test.sign = 'typeof的結果可能為String'; // 原始值賦值後會自動銷燬
}

console.log(test.sign); // undefined 
// 訪問原始值的屬性,會自動 new String() 呼叫包裝類 然後再裡面的值

  • 練習題2
var Person (name, age, sex) {
    var a = 0;
    this.name = name;
    this.age = age;
    this.sex = sex;
    function sss() {
        a++;
        console.log(a);
    }
    this.say = sss;
}

var person1 = new Person();
person1.say(); // 1
person1.say(); // 2

var person2 = new Person();
person2.say(); // 1

// 每次new 都是一個新的執行期上下文 互不影響