javascript 对象

常用内置对象

Object
Arguments
Array
String
Date
Error
Math
RegExp

常见对象

字面量对象

var student = {
    // 属性
    name : 'test_name',
    age  : 10,
    sex  : '男',
    // 方法
    say  : function () {
        return 'say';
    },
    eat : function () {
        return 'eat';
    },
    study : function () {
        return 'study';
    }
};

// 使用对象
console.log( typeof student ); // 查看数据类型
console.log( student.name );   // 查看属性
console.log( student.study );  // 使用方法

JSON

var jsonData = {
    'name' : 'user1',
    'age'  : 18,
    'sex'  : '男'
    // json有两种数据形式 数组 和 对象,可以灵活嵌套使用
    'friends' : [
        {'name': 'user2'}, {'name':'user3'} , {'name':'user3'}
    ];
};
// 使用
console.log( jsonData.name );

字面量对象和 json 对象的区别:

JSON对象的属性必须用引号硬起来,字面量对象可以省略

JSON本身是一种数据交换格式

JSON不能有方法,字面量对象可以有方法

for in 遍历对象

// 对象
var user = {
    name : 'user1',
    age  : 18,
    study: function () {
        return 'I can study';
    }
};
// for in 遍历并输出
for(var key in user){
    console.log(key + '=>' + user[key]);
}

构造函数

构造函数 与 普通函数 的区别:

构造函数 可以产生对象 ,普通函数不能产生 对象

// 第一种方式: 传入多个值
function Person($name, $age) {
    this.name = $name;
    this.age  = $age;
    this.show = function () {
        return '我叫' + this.name + ',今年' + this.age +'岁!';
    }
}
var p1 = new Person('user1',18);
console.log(p1.show()); // 我叫user1,今年18岁!


 // 传入一个对象
function Person(option) {
    this.name = option.name;
    this.age  = option.age;
    this.show = function () {
        return '我叫' + option.name + ',今年' + option.age +'岁!';
    }
}
var p1 = new Person({ name : 'user1', age  : 18 });
console.log(p1.show()); // 我叫user1,今年18岁!

this 关键字

this 在哪个函数中 this 就代表谁

谁调用,this 就是谁,永远指向调用者

构造函数中的 this 始终是new关键字产生的当前对象

构造器 Constructor

// 返回创建此对象的构造函数
function Person(options){
    this.name = options.name;
    this.age  = options.age;
    this.say = function () {
        return this.name + '=>' + this.age;
    }
}
var p1 = new Person({name : 'zs', age  : 18});
console.log( p1.constructor ); // 返回 function Person (){...}

原形属性(对象) prototype

function Person(options){
    this.name = options.name;
    this.age  = options.age;
    this.say = function () {
        return '我叫'+this.name + ',今年' + this.age + '岁';
    }
}

// 利用 构造函数名.prototype.方法 动态为所有通过new Person产生的对象都添加属性或方法
Person.prototype.run = function () {
    return 'I can run';
}


// prototype 也可以为js内置对象添加属性和方法
Array.prototype.info = function () {
    console.log('这是通过 prototype 添加的方法,所有的数组对象都会有这个方法');
}

var arr = new Array();
arr.info();

var arr2 = [];
arr2.info();

注: 在构造函数中的属性和方法每一次通过 new 创建一个对象就会在内存中开辟新的空间

而通过 prototype 属性动态添加的不会每创建一个对象就在内存中开辟一个空间

注:由于用 prototype 属性动态添加的不会每创建一个对象就内存中开辟一个空间,这样一来就会覆盖原来的对象

// 构造方法
function Person (options){
    this._init(options);
}

Person.prototype = {
    // 初始化对象方法
    _init: function (options) {
        this.name = options.name
        this.age  = options.age;
    },
    say : function () {
        console.log( '我叫'+ this.name +',今年' + this.age + '岁' );
    }
};

var p1 = new Person({ name : 'user1', age  : 18 });
var p2 = new Person({ name : 'user2', age  : 20 });

// 通过 prototype 属性动态添加的不会每创建一个对象就开辟一个空间
console.log(p1.say === p2.say);

p1.say();

面向对象

面向对象的三大特性:

封装
继承
多态

闭包

闭包可以封闭作用域

闭包函数在定时时就自动执行

两种闭包

// 1. 函数内部返回一个函数

function test() {
    return function () {
        // ...
    }
}


// 2. 小闭包,函数自调用
(function (index) { // 形参
    // ...
})(i); // 实参

通过闭包实现高级排他

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画封装</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li {
            background: #cccccc;
            list-style: none;
            height: 30px;
            margin-top: 10px;
        }
        li.current {
            background: red;
        }
    </style>
</head>
<body>
<ul>
    <li class="current"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    window.onload = function () {
        // 获取所有的li标签
        var lis = document.getElementsByTagName('li');
        // 默认选中第一个 li
        var lastCurrent = 0;
        for (var i = 0; i < lis.length; i++) {
            (function (index) {
                // 给所有的li节点绑定鼠标移动事件
                lis[index].onmouseover = function () {
                    // 清除之前之前的那个li设置的current类
                    lis[lastCurrent].className = '';
                    // 设置当前的li的类名为 current
                    this.className = 'current';
                    // 将 lastCurrent 的值改为现在加上current类的li的下标
                    lastCurrent = index;
                }
            })(i);
        }
    };
</script>
</body>
</html>

通过闭包实现(瀑布流布局节流函数)

function throttle (fn, delay) {
    var timer;
    return function () {
        clearTimeout = null;
        timer = setTimeout(fn, delay);
    }
}