美文网首页
Javascript高级程序设计笔记

Javascript高级程序设计笔记

作者: 何必自找失落_ | 来源:发表于2017-12-19 12:08 被阅读0次

    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 就变成了不可枚举的属性了
    1. 组合使用构造函数模式和原型模式
    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); // ["上帝", "耶稣"]
    1. 动态原型模式
    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
    1. 寄生构造模式
    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

    相关文章

      网友评论

          本文标题：Javascript高级程序设计笔记

          本文链接：https://www.haomeiwen.com/subject/zicbwxtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|Javascript高级程序设计笔记|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！