Javascript高级程序设计笔记

Math

Math.max、Math.min

var array = [11,23,45,800,22,0,33];
Math.max.apply(Math, array); // 800
Math.min.apply(Math, array); // 0

Math.random

/**
* 随机获取一个整数（范围）
* @param {Number} minValue 小值
* @param {maxValue} maxValue 大值
*/
var getRandomRange = function(minValue, maxValue) {
  var degValue = maxValue - minValue + 1;
  return Math.floor(Math.random() * degValue + minValue);
}
var colors = ['green','red','blue','black','purple'];
var color = colors[getRandomRange(0, colors.length - 1)]; // 随机获得数组中的每项

属性类型

1、数据类型

• configurable 表示能否通过delete删除该属性 默认值true
• enumerable 表示是否可枚举 就是 for in 循环是否可以遍历到 默认值true
• writable 表示是否可以修改 默认值 true
• value 属性的数据值 默认值 undefined

var person = {};
Object.defineProperty(person, 'name', {
    writable: false, // 不可改变
    configurable: false, // 不可删除
    enumerable: false, // 不可枚举
    value: 'xiaocheng'
});
console.log(person.name); // xiaocheng
person.name = 'sss';
delete person.name;
console.log(person.name); // xiaocheng

2、访问属性

• configurable 能否通过删除属性从而重新定义 默认值true
• enumerable 能否枚举， for in 循环返回 默认值true
• get 读取数据时候调用 默认值 undefined
• set 在写入属性时调用 默认值 undefined

var book = {
    _year: 2017,
    edition: 1
}
Object.defineProperty(book, 'year', {
    get: function () {
        return this._year;
    },
    set: function (newYear) {
        if (newYear > this._year) {
            this.edition += newYear - this._year;
            this._year = newYear;
        }
    }
});
console.log(book.year); // 2017
book.year = 2019;
console.log(book._year); // 2019
console.log(book.edition); // 3

3、定义多个属性

var book = {};
Object.defineProperties(book, {
    _year: {
        value: 2017,
        writable: true // 不写无法修改 默认为false
    },
    edition: {
        value: 1,
        writable: true
    },
    year: {
        get: function () {
            return this._year;
        },
        set: function (newYear) {
            if (newYear > this._year) {
                this.edition += newYear - this._year;
                this._year = newYear;
            } 
        }
    }
})
console.log(book); // {_year: 2017, edition: 1}
book.year = 2019;
console.log(book); // {_year: 2019, edition: 3} 

读取属性

// 承接上面设置的多属性
// 数值属性
var descriptor = Object.getOwnPropertyDescriptor(book, '_year');
console.log(descriptor); // {value: 2019, writable: true, enumerable: false, configurable: false}
// 对象属性
var yearDescriptor = Object.getOwnPropertyDescriptor(book, 'year');
console.log(yearDescriptor); // {enumerable: false, configurable: false}
console.log(yearDescriptor.value); // undefined
console.log(typeof yearDescriptor.set); // function

---

创建对象的常用方法

1.工厂模式

function createPerson (name, age, job) {
    var o = new Object();
    o.name = name || 'xiaocheng';
    o.age = age || 24;
    o.job = job || 'coding';
    o.sayName = function () {
        console.log(this.name);
    }
    return o;
}
var person1 = createPerson('张三', 15, '搬砖');
var person2 = createPerson('李四', 16, '服务员');

2.构造函数模式

function Person (name, age, job) {
  this.name = name || 'xiaocheng';
  this.age = age || 24;
  this.job = job || 'coding';
  this.sayName = function () {
    console.log(this.name);
  }
}
var person1 = new Person('张三', 15, '搬砖');
var person2 = new Person('李四', 16, '服务员');
var o = new Object();
Person.call(o, '王五', 16, '厨师');
o.sayName(); // 王五

构造函数模式和工程模式的不同
1、没有显示的创建对象
2、直接把属性和方法赋值给了 this 对象
3、没有 return

3.原型链模式

function Person () {};
Person.prototype.name = 'xiaocheng';
Person.prototype.age = 24;
Person.prototype.job = 'coding';
Person.prototype.sayName = function () {
    console.log(this.name);
}
var person1 = new Person();

特定类型的实例共享所有属性和方法
一些判断方法...
object.hasOwnProperty(name); // 此属性是否是该对象的实例属性
name in object 判断属性是否属于该对象 无法区分是否是实例属性还是原型属性
function hasPrototypeProperty(object, name) {
return !object.hasOwnProperty(name) && (name in object)
} // 判断是否是原型属性

获得可枚举的实例属性 Object.keys(obejct); // 返回值为数组

function Person () {};
Person.prototype.name = 'xiaocheng';
Person.prototype.age = 24;
Person.prototype.job = 'coding';
Person.prototype.sayName = function () {
    console.log(this.name);
}
console.log(Object.keys(Person.prototype));//  ["name", "age", "job", "sayName"]
var person = new Person();
console.log(Object.keys(person)); // []
person.name = '张三';
person.age = 16;
console.log(Object.keys(person)); // ["name", "age"]

获得所有实例属性 不管它可不可枚举 Object.getOwnPropertyNames(object) // 返回值为数组

function Person () {};
Person.prototype.name = 'xiaocheng';
Person.prototype.age = 24;
Person.prototype.job = 'coding';
Person.prototype.sayName = function () {
    console.log(this.name);
}
console.log(Object.getOwnPropertyNames(Person.prototype));//  ["constructor", "name", "age", "job", "sayName"]
var person = new Person();
console.log(Object.getOwnPropertyNames(person)); // []
person.name = '张三';
person.age = 16;
console.log(Object.getOwnPropertyNames(person)); // ["name", "age"]

更简单的原型方法

function Person () {};
Person.prototype = {
    constructor: Person,
    name: 'xiaocheng',
    age: 24,
    job: 'coding',
    sayName: function() {
        console.log(this.name)
    }
}
// 但是这样做 constructor 变成了可枚举属性 我们可以用下面的方法
Person.prototype = {
    name: 'xiaocheng',
    age: 24,
    job: 'coding',
    sayName: function() {
        console.log(this.name)
    }
}
// 如果不设置 constructor 它的构造函数将会指向 Object
Object.defineProperty(Person.prototype, 'constructor', {
    enumerable:false,
    value: Person 
});
// 现在 constructor 就变成了不可枚举的属性了

4. 组合使用构造函数模式和原型模式

function Person (name, age, job) {
    this.name = name;
    this.age = 24;
    this.job = job;
    this.friends = ['上帝','耶稣'];
}
Person.prototype = {
    constructor: Person,
    sayName: function () {
        console.log(this.name)
    }
};
var person1 = new Person('张三', 15, '搬砖');
var person2 = new Person('李四', 14, '服务员');
person1.friends.push('如来');
console.log(person1.friends); // ["上帝", "耶稣", "如来"]
console.log(person2.friends); // ["上帝", "耶稣"]

5. 动态原型模式

function Person (name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    if (typeof this.sayName != 'function') {
        // arguments.callee // 返回正在执行的函数对象 也就是 Person
        arguments.callee.prototype.sayName = function () {
            console.log(this.name);
        }
    }
}
var person1 = new Person('xiaocheng', 24, 'coding');
person1.sayName(); // xiaocheng

6. 寄生构造模式

function Person (name, age, job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function() {
        console.log(this.name);
    }
    return o;
}
var person = new Person('xiaocheng', 24, 'coding');
person.sayName() // xiaocheng

例子 创建一个特殊数组

function SpecialArray () {
    var array = new Array();
    array.push.apply(array, arguments); // 此处 不能写成 array.push(arguments)
    array.toPipedString = function () {
        return this.join('-');
    };
    return array;
}
var colors = new SpecialArray('red', 'block', 'green');
console.log(colors.toPipedString()); // red-block-green