面向对象基础知识（一）
目录
面向对象基础（一）
javaScript基础知识
javaScript是一门编程语言。
JavaScript的运行环境
浏览器-》内核（渲染引擎：JS解析器V8）
JavaScript 组成
- ECMAScript（3.0主要版本），JavaScript的标准
- DOM
- BOM
JavaScript中的数据类型？
基本类型：number string boolean null undefined
引用类型 : object (Array Math RegExp Function Object Error Number String Boolean XMLHttpRequest)
基本类型和引用类型的差别
- 存储方式不同：基本类型数据存储在栈stack，引用类型存储在堆heap
- 传递参数不同，基本类型传值，复杂类型传递地址。
异常处理
一般将容易出错的代码放在try catch中
var abc=123;
try {
//try当中的代码一旦发生错误，之后的代码就不再执行
//可以用来验证后台数据的正确性，
var data=false;
if(!data){
throw new Error('数据错误')
}
console.log(abc);
}catch (e){
//只有try部分发生了错误，该部分代码才会执行。
//e.message表示错误的原因
/e.name表示错误的类型
console.log(e.message);
console.log(e.name);
if(e.name==='Error'){
onload=function(){
var info=document.getElementById("id");
info.innerHTML = e.message;
}
}
}finally {
//无论try当中的代码是否发生错误，finally中的代码都会执行
console.log('abc');
}
应用场景
var xhr = new XMLHttpRequest();
if(window.XMLHttpRequest){
//标准浏览器
xhr = new XMLHttpRequest;
}else {
//早起的ＩＥ浏览器
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
//使用try catch
try {
xhr = new XMLHttpRequest();
}catch {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
对象（无序的键值对集合）
所谓的对象就是某种具体的事物。
//构造函数和实力对象距离
//该部分是指构造函数。
function Car(brand,color){
this.brand=brand;
this.color = color;
}
//该部分是构造函数。
var car1=new Car('奔驰','red');
对象属性的访问形式以及差别
方括号的定义方式可以使用变量
- 通过点的方式。如
f.info。 - 通过方括号的方式。如
f[info]。
function Foo(size,info){
this.size = size ;
this.info = info ;
}
var f = new Foo(small,curcle);
//从访问以及添加属性方面，两种方式没有差别。
console.log(f.info);
console.log(f['info']);
//从添加属性方面，两者也没有差别
f.age = 12;
f['attr'] = 'hello';
//但，方括号可以使用变量的方式访问属性。
var abc = 'info';
console.log(f[abc]);
对象创建方式
- 通过构造函数
- 字面量
//字面量
var obj = {
username : 'juanjuan',
age: '18',
gender : 'female'
}
//构造函数
//如果构造函数不需要传递参数，那么后面的括号可以省略。
var obj = new Object();
obj.usename = 'lili',
obj.age = '88',
obj.gender = 'male'
构造函数实例对象本质上：
- 开辟一块堆内存存储实例中的数据（属性和方法）
- 用this指向该区域。
- 通过this向该区域中放置数据。
- 返回this。
function Foo(info){
//构造函数中的this指的是实例对象
this.info = info;
this.showInfo = function(){
//实例方法中的this指的是实例对象本身
console.log(this.info);
}
//构造函数的默认返回值是this。
//如果返回的是基本数据类型，则无效。
//如果返回的是引用类型，则产生效果。
}
原型
实现数据共享（实例对象中数据共享）
prototype和__proto__
A：函数都有一个原型属性prototype，该属性值本质上也是对象（实际上就是object的实例）
原型的作用：实现数据共享（实例对象之间进行共享），实现继承。
**B：prototype,构造函数产生的实例对象都有一个属性__prototype__，该属性不是标准属性，不可以在编程中使用，实际上该属性是浏览器内部使用的，与prototype指向相同。 **
function Person(name,age){
this.name = name;
this.age = age;
}
person.prototype.showName = function(){
console.log(this.name);
}
person.prototype.showAge = function(){
console.log(this.age);
}
var p1 = new Person('tom',12);
var p2 = new Person('jerrey',13);
JavaScript 面向对象相关概念
- 构造函数
- 实例对象
- 原型
什么是面向对象
面向对象是一种编程模式，就是以对象的方式写代码。
//面向对象写法，点击按钮，改变div背景色
<button id='btn'>点击改变</button>
<div id='dv'></div>
<script>
function changeColor(btn,div){
this.btn = document.getElementById(btn);
this.div = document.getElementById(div);
}
changeColor.prototype.init = function(){
var that = this;
this.btn.onclick=function(){
that.div.style.backgroundColor='red';
}
}
onload = function(){
var cc = new changeColor('btn','dv');
cc.init();
}
</script>
面向对象中this场景
- 构造函数中的this:实例对象
- 原型方法中的this:实例对象
- 事件方法中的this:绑定时间的对象。
数据类型判断typeof
console.log(1,'a',true); ====>>>object
console.log(null)===>>>object
console.log(new Number(10))===>>>object
console.log(function(){})====>>>function
对象中属性的判断
- in:判断对象中是否存在某个属性。属性在实例对象和原型对象上都可以
- hasOwnProperty()：判断对象中是否存在某个属性。属性只能是在实例对象上。
//全局作用域中的变量和函数都是window对象的成员（预解析）
//JS中没有块级作用域
if('a' in window){
var a = 123;
console.llog(a);
}
function Foo(info){
this.info = info;
}
Foo.prototype.flag = 123;
var foo = new Foo('hello');
console.log('flag' in foo);//true
console.log('info' in foo);//true
console.log(foo hasOwnProperty('info'));//true
console.log(foo hasOwnProperty('flag'));//false
实现一个方法，判断某个属性是否在原型上。
function check(attr,obj){
if(attr in obj && !obj hasOwnProperty(attr)){
retrun true;
}else {
return false;
}
}
var ret = check('flag',foo);
console.log(ret);
面向对象和面向对象的区别
A：面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用即可。
B：面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。
