常用内置对象
- 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);
}
}