JS基本介绍
- JS的用途：Javascript可以实现浏览器端、服务器端(nodejs)。。。
- 浏览器端JS由以下三个部分组成：
- ECMAScript：基础语法(数据类型、运算符、函数。。。)
- BOM(浏览器对象模型)：window、location、history、navigator。。。
- DOM(文档对象模型)：div、p、span。。。
- ECMAScript又名es，有以下重大版本：
- 旧时代：
- es1.0。。。es3.1
- 新时代：
- es5
- es6(es2015)
- es7(es2016)、es8(es2017)
- 旧时代：
数据类型
- 基本数据类型——值类型：(数字、字符串、布尔值、null、undefined)
- undefined类型？
- 复杂数据类型——引用类型：(对象)
- 数组
- 函数
- 正则表达式
- Date
对象的基本使用
创建一个对象
var student={
name:"李白" , //student有一个name属性，值为"李白"
grade:"初一" ,
//a、student有一个say属性，值为一个函数
//b、student有一个say方法
say:function(){
console.log("你好");
},
run:function(speed){
console.log("正在以"+speed+"米/秒的速度奔跑");
}
}
对象是键值对的集合：对象是由属性和方法构成的 (ps：也有说法为：对象里面皆属性，认为方法也是一个属性)
- name是属性 grade是属性
- say是方法 run是方法
对象属性操作
获取属性：
第一种方式：.语法
- student.name 获取到name属性的值，为：“李白”
- student.say 获取到一个函数
第二种方式：[]语法
- student[“name”] 等价于student.name
- student[“say”] 等价于student.say
号外：2种方式的差异：
- .语法更方便，但是坑比较多(有局限性)，比如：
- .后面不能使用js中的关键字、保留字(class、this、function。。。)
- .后面不能使用数字
var obj={};
obj.this=5; //语法错误
obj.0=10; //语法错误
- []使用更广泛
- o1[变量name]
- [“class”]、[“this”]都可以随意使用
obj["this"]=10 - [0]、[1]、[2]也可以使用
obj[3]=50 = obj["3"]=50- 思考：为什么obj[3]=obj[“3”]
- 甚至还可以这样用：["[object Array]"]
- jquery里面就有这样的实现
- 也可以这样用：["{abc}"]
- 给对象添加了{abc}属性
设置属性
student["gender"]="男"等价于：student.gender="男"- 含义：如果student对象中没有gender属性，就添加一个gender属性，值为"男"
-
如果student对象中有gender属性，就修改gender属性的值为"男"
- 案例1：
student.isFemale=true - 案例2：
student["children"]=[1,2,5] - 案例3：
student.toShanghai=function(){
console.log("正在去往上海的路上")
}
删除属性
- delete student[“gender”]
- delete student.gender
通过构造函数创建对象
构造函数创建对象的例子：
-
var xiaoming = new Object() --> var xiaoming = {};
-
var now = new Date()
-
var rooms = new Array(1,3,5) --> var rooms = [1,3,5]
-
var isMale=/123/;==>var isMale=new RegExp("123")- isMale是通过RegExp构造函数创建出来的对象
- isMale是RegExp构造函数的实例
-
以上例子中，Object、Date、Array都是内置的构造函数
自定义一个构造函数来创建对象
- 构造函数
function Person(name,age){
this.name=name;
this.age=age;
}
var p1=new Person("赵云",18)
- 说明：
p1就是根据【Person构造函数】创建出来的对象
构造函数的概念
- 任何函数都可以当成构造函数
function CreateFunc(){ } - 只要把一个函数通过new的方式来进行调用，我们就把这一次函数的调用方式称之为：构造函数的调用
- new CreateFunc(); 此时CreateFunc就是一个构造函数
- CreateFunc(); 此时的CreateFunc并不是构造函数
关于new Object()
- new Object()等同于对象字面量{}
构造函数的执行过程
var p1=new Person();
- 1、创建一个对象 (我们把这个对象称之为Person构造函数的实例)-
_p1 - 2、创建一个内部对象，
this，将this指向该实例(_p1) - 3、执行函数内部的代码，其中，操作this的部分就是操作了该实例(_p1)
- 4、返回值：
- a、如果函数没有返回值(没有return语句)，那么就会返回构造函数的实例(p1)
- b、如果函数返回了一个基本数据类型的值，那么本次构造函数的返回值是该实例(_p1)
function fn(){ } var f1=new fn(); //f1就是fn的实例 function fn2(){ return "abc"; } var f2=new fn2(); //f2是fn2构造函数的实例- c、如果函数返回了一个复杂数据类型的值，那么本次函数的返回值就是该值
function fn3(){ return [1,3,5]; //数组是一个对象类型的值， //所以数组是一个复杂数据类型的值 //-->本次构造函数的真正返回值就是该数组 //-->不再是fn3构造函数的实例 } var f3=new fn3(); //f3还是fn3的实例吗？错 //f3值为[1,3,5]
最后补充：
原型
- 原型很多人开发用不到？
- 很多人都用es6/7/8开发，确实用的比较少
- 如果你用es5之前的版本开发代码(IE8、IE7。。。)，可能天天都要写原型
- 理解了原型，才是理解了JS面向对象的核心
- 类继承其实本质上还是用原型继承来(包装)的
对象的属性查找规则
//–>1、首先查看本身有没有length属性
//–>2、如果本身没有该属性，那么去它的原型对象中查找
//–>3、如果原型对象中没有，那么就去原型对象的原型对象中查找，最终一直找到根对象（Object.prototype）
//–>4、最终都没有找到的话，我们认为该对象并没有该属性，如果获取该属性的值：undefined
global和window的区别
- global是es中全局作用域中的根对象
- 但是nodejs里面，global全是表示全局变量的载体
- 浏览器端的js里面，全局变量都放在了window中，浏览器中不存在global对象