Javascript面向对象
面向对象程序设计（简称OOP）是现在最流行的程序设计方法，这种方法有别于基于过程的程序设计方法。在写面向对象的WEB应用程序方面JavaScript是一种很好的选择.它能支持OOP
面向过程
面向过程专注于如何去解决一个问题的过程步骤。编程特点是由一个个函数去实现每一步的过程步骤，没有类和对象的概念。
面向对象
专注于由哪一个对象来解决这个问题，编程特点是出现了一个类，从类中拿到对象，由这个对象去解决具体问题。(偷懒)
面向对象的三大特征是继承、封装、多态.
JavaScript Console 对象
Console 对象用于 JavaScript 调试。
JavaScript 原生中默认是没有 Console 对象,这是宿主对象（也就是游览器）提供的内置对象。 用于访问调试控制台, 在不同的浏览器里效果可能不同。
Console 对象常见的两个用途：
显示网页代码运行时的错误信息。
提供了一个命令行接口，用来与网页代码互动。
类：一类具有相同特性(属性)和行为(方法)的集合。
对象：从类中，拿出具有确定属性和方法的个体。
两者关系，类可以看作是一个方法集合体，只有被调用的时候，才有明确的数值。对象则是有确定的值和方法。
所以之间的关系可以为：
①类是抽象的，对象是具体的（类是对象的抽象化 实例化一个对象），对象是类的具体化
②类是一个抽象的概念，只能说类有属性和方法，但是不能给属性赋具体的。
01创建类
类：一类具有相同特性(属性)和行为(方法)的集合。
<script>
//函数 方法 其实也是一个类
function test(){
var number=10;
// alert(number);
}
test();
//创建一个变量去实例化一个对象
var a=new test();
console.log(typeof a);
//类 按对象的标准去创建一个类 类就拥有乐自己的属性
function Car(){
this.name='宝马',
this.age='3年',
this.run=function(){
var number = 10;
alert(number)
}
}
var b=new Car();//实例化一个对象 要用到它里面的属性和方法的时候我们才实例化
alert(b.name);
</script>
02创建对象
对象：从类中，拿出具有确定属性和方法的个体。
<script>
//先构造一个类或者构造函数
function Car(){
this.name='宝马',
this.age='3年',
this.run=function(){
var number = 10;
alert(number)
}
}
//new 一个类或者函数 去实例化获证声明一个对象
类名必须使用大驼峰法则，注意与普通函数区分。
var b =new Car();
//直接声明一个对象
var obj = new Object();
obj.name ='奥迪';
obj.age=10;
obj.run=function(){
//number 是一个局部变量 外部不能直接调用 需要返回值才能调用
var number=10
return number;
}
console.log(obj.run());
</script>
03创建对象
<script>
//直接声明一个对象
// var obj = new Object();
// obj.name ='奥迪';
// obj.age=10;
// obj.run=function(){
// //number 是一个局部变量 外部不能直接调用 需要返回值才能调用
// var number=10
// return number;
// }
// console.log(obj.run());
//{键值对} 一步到位创建对象 键值对 key:"value"
// var car ={name:"法拉利",age:15,run:function(){
// alert(this.name)
// return this.name;
// }}
// console.log(car.run());
var obj3=function(){this.sname="marry"}
var obj4 = new obj3();
alert(typeof obj4);
</script>
04对象的比较
<script>
//先构造一个类或者构造函数
function Car() {
this.name="宝马";
this.age="3年";
this.run=function(){
var number = 10;
alert(number);
}
}
var a = new Car();
a.name = "宝马320";
var b = new Car();
console.log(a);
console.log(b);
console.log(a==b); // false a,b对象虽然拥有相同的属性和方法 但是他们两个是不一样的对象
console.log("a的name"+a.name);
console.log("b的name"+b.name);
</script>
05对象的实例
<script>
// var a = new Car();
// var b = new Car2();
// console.log(a);
// console.log(a.constructor);//返回的是对象的构造函数
// alert(a);
//类本身也是对象
function Car3() {
this.name = "宝马";
this.age = "三年";
this.run = function () {
var number = 10;
alert(number);
}
}
var test = new Car3();
constructor：返回当前对象的构造函数
instanceof：检测一个对象是不是一个类的实例
instanceof作用是测试它左边的对象是否是它右边的类的实例，返回 boolean 的数据类型。
console.log(test instanceof Car3);//检测test对象是不是这个car3的一个实例
</script>
06对象的调用
对象的属性和方法可以通过 ”.” 来调用
var a = new Object();
a.name = ‘Tom’;
//调用name/方法，如果没有，就自动新建个
//如果存在了，就修改其值。如果是函数，就变为文本，调用的时候a.name。如果修改为函数，调用的时候就a.name()
对象主要包括：
对象名称
对象的属性（变量）
对象的方法(操作)
<script>
var obj={name:"迈巴赫",age:5,run:function(){
return 190;//没有返回值调用就会返回undefined
}}
// console.log(obj.name);
// console.log(obj.run());
console.log("未修改前"+obj.run());
obj.run="我已经被重新定义啦"; //字符串
console.log("修改后"+obj.run);
obj.text="文本内容12345";
console.log(obj);
</script>
07强弱类型语言
强类型定义语言：强制数据类型定义的语言。
弱类型定义语言：数据类型可以被忽略的语言。
Java: String str = “字符串”;int num = 16;
Javascript : var str = “字符串”; var num = 16;
传参时候，java函数的参数必须对应函数的参数,而且必须要携带参数才能传。 Javascript 没有设定参数，传入参数也不会报错
//js是弱类型语言 数据类型可以被忽略的语言 可以随意更改变量的数据类型
var a=100;
var str="我是字符串";
console.log(a);
a = "我是字符串2";
console.log(a);
a=function(){
alert("执行一个方法")
}
alert(typeof a);
</script>
08对象的迭代
for-in介绍
for(var index in objArr){
console.log(objArr[index])
}
以上代码会出现的问题：
1.index 值 会是字符串（String）类型
2.循环不仅会遍历数组元素，还会遍历任意其他自定义添加的属性，如，objArr上面包含自定义属性，objArr.name，那这次循环中也会出现此name属性
3.某些情况下，上述代码会以随机顺序循环数组
for-in循环设计之初，是给普通以字符串的值为key的对象使用的。而非数组。
for in
for （var key in 对象）｛
//.. var可以省略
console.log(对象[key ])
｝
for...in循环会遍历一个object所有的可枚举属性。当然可以迭代数组
<script>
//数组的迭代
var array = [1,23,4,5,7];
for(var i=0;i<array.length;i++){
// console.log(array[i]);
}
// 键值对 key:value
var obj = {name:"兰博基尼",age:3,run:function(){
return 190;
},array:[1,23,4,5]};
// for(var j=0;j<obj.array.length;j++){
// console.log(obj.array[j]);
// }
// console.log(obj["name"]);
//for in 迭代对象
for(var key in obj){
console.log(key+":"+obj[key])
// console.log(obj[key]);
}
//for in 迭代数组
for(var key2 in array){
// console.log("key2："+key2);
// console.log(array[key2])
}
</script>
09forEach
forEach介绍
objArr.forEach(function (value) {
console.log(value);
});
foreach 方法没办法使用 break 语句跳出循环，或者使用return从函数体内返回
<script>
var a=["12","啊","test"];
// alert(typeof a);
// function Test(){
// a.forEach(function(value,i){
// console.log(i+":"+value);
// })
// }
// Test();
var arr = [1,2,3,4,5]
arr.forEach(function(value,i){
// return ; 没有返回值
console.log(i+":"+value)
})
</script>
10for-of
for-of介绍
for(let value of objArr){
console.log(value)
}
- 可以避免所有 for-in 循环的陷阱
2.不同于 forEach()，可以使用 break, continue 和 return
3.for-of 循环不仅仅支持数组的遍历。同样适用于很多类似数组的对象
4.它也支持字符串的遍历
5.for-of 并不适用于处理原有的原生对象
//for...of会遍历具有iterator接口的数据结构
//for...of遍历（当前对象上的）每一个属性值
<script>
var a=["12","啊","test"];
// for(var value of a){
// console.log(value)
// }
for(var i in a){
console.log(i)
}
</script>
11对象工厂
每次不需要自己new，由函数自己去new
通过函数去创建一个对象，函数最终return 一个对象，这样来获得一个对象。本质上和平时的new Object没有什么区别，就是通过一个函数去获得对象。
<script>
var a={};
//学生
function Student(name,age,lesson) {
//内部先实例化一个对象
var obj = new Object();
obj.name = name;
obj.age = age;
obj.lesson = lesson;
obj.study = function () {
alert(this.name+"正在学习"+this.lesson)
}
return obj;//返回值 对象
}
var s1 = Student("张三",18,"HTML5");
var s3 = Student("李四",34,"html")
console.log(s3)
s1.text="sadasdasdad";
console.log(s1);
console.log(s1.study());
</script>
12对象的使用
先把要多次运用的方法封装起来再调用
<script>
var a=10;
var b=6;
var array=[1,22,77,66,88,13];
var obj = new Jisuanqi();
alert(obj.add(a,b));
alert(obj.jian(a,b));
alert(obj.cheng(a,b));
alert(obj.oushu(array));
</script>
JSON：JavaScript Object Notation(JavaScript对象表示法)
存储和交换文本信息的语法，类似XML。
JSON {”name”:”张三”,”url”:”www.baidu.com”}
JavaScript的对象: ｛name : ”张三”,url:”www.baidu.com”｝
eval():函数可计算某个字符串，并执行其中的的 JavaScript 代码;如果有一个JSON文本，可以通过它来变成JSON
JSON.parse()：将JSON字符串转换为JSON对象
JSON.stringify()将JSON对象转化为字符串
13创建json
<script>
//js 对象
var obj={name:"张三",age:17}
//JSON对象
// key value 键/值 对
var json = {"name":"字符串1","age":17}
alert(typeof json)
// console.log(json instanceof Object);true
for(var i in json){
console.log(json[i]);
}
</script>
14json的转化
<script>
//后端发送来一个json的文本
var text ='{"name":"字符串1","age":17}';
// alert(typeof text);
JSON.parse()：将JSON字符串转换为JSON对象
var json=JSON.parse(text);
alert(typeof json)
for(var i in json){
console.log(json[i])
}
alert(json.name);
</script>
15eval()
eval():函数可计算某个字符串，并执行其中的的 JavaScript 代码;如果有一个JSON文本，可以通过它来变成JSON
<script>
// eval("alert(122)");
var text ="{'name':'字符串1','age':17}";
// alert(typeof text);
var json = eval("("+text+")");
// console.log(json); object json对象
var js ="{name:'张三',age:17}";
// alert(typeof js);
var jsobj=eval("("+js+")");
// console.log(jsobj)
// for(var i in json){
// console.log(json[i]);
// }
for(var i in jsobj){
console.log(jsobj[i])
}
</script>
16json对象转化成字符串
JSON.stringify()将JSON对象转化为字符串
<script>
var json = {"name":"英菲尼迪","age":19};
console.log(json)
var text=JSON.stringify(json);
// console.log(typeof text)
console.log(text)
</script>
17json获取值
<script>
var js={name:"maybe",age:18};
//js对象 获取值
// console.log(js.name);
// console.log(js["name"]);
//json对象获取值
var json = {"name":"maybe","age":18}
//获取值
console.log(json.name)
console.log(json.age)
console.log(json["name"])
</script>
18json的嵌套对象
<script>
var js={name:"maybe",age:18};
var js1={name:"王老五",age:16};
var js2={name:"老王",age:52};
var json = {"student":js1,"teacher":js,"order":js2}
// console.log(json)
// var student = json.student;
// for(var i in student){
// console.log(student[i])
// }
// var teacher = json.teacher;
// for(var i in teacher){
// console.log(teacher[i])
// }
//第一层json对象
for(var key in json){
console.log(json[key])
for(var i in json[key]){
console.log(json[key][i])
}
}
</script>
19json修改值
<script>
var js ={name:"邓成章",age:18};
var js1={name:"老王",age:16};
var js2={name:"老五",age:19};
var json ={"student":js1,"teacher":js,"order":js2}
json.student["age"] = 100;
console.log(json.student["age"]);
</script>
20json删除
第一种方法：通过把json中需要的值取出来，重新生成json对象，这种方法比较笨
第二种方法：通过delete 删除属性，这种方法比较常用，在第三方js库中经常能看到，推荐
<script>
//js 对象的删除
var js ={name:"邓成章",age:18};
var js1={name:"老王",age:16};
var js2={name:"老五",age:19};
delete js["name"];
// console.log(js)
//json对象删除
var json ={"student":js1,"teacher":js,"order":js2}
delete json.student;
// console.log(json);
for(var key in json){
console.log(json[key])
}
</script>
21新浪api
for in迭代
for(var i in json){
// console.log(json[i])
for(var j in json[i]){
// console.log(json[i][j])
for(var k in json[i][j]){
// console.log(json[i][j][k])
for(var o in json[i][j][k]){
console.log(json[i][j][k][o]);
}
}
}
}