Javascript-基础知识（3）

 1.回顾：上篇学习了 正则，函数，作用域，日期函数

 2.这篇将学习，面向对象与原型，匿名函数和闭包，BOM

 3.面向对象与原型

• 两种开发模式：1.函数式(过程化) 2.面向对象(oop):具有类的概念
• JavaScript（ECMAScript）没有类的概念，因此他的对象也与基于类的语言中的对象有所不同。
• 继承是通过原型或者对象冒充的形式进行的。
• 1.创建对象,解决多个类似对象的创建，而使用工厂模式创建
• e.g 工厂模式创建：
  

  function createObject(name,age){
  var obj=new Object();
  obj.name=name;
  obj.age=age;
  obj.run=function(){
  return this.name+this.age;
  };
  return obj;
  }
  
  var box1=createObject('yuan',23);
  var box2=createObject('ming',243);

  
  
  
• 2.构造函数 创建对象;this 相当于obj,没有return语句，他是自动返回的！
• e.g
  

  function box(name,age){
  this.name=name;
  this.age=age;
  this.run=function(){
  return this.name+this.age;
  };
  }
  var box1=new box('yuan',23);
  var box2=new box('ming',243);

  
  
  
• 构造函数也是函数，但函数名第一个字母必须大写
  必须new构造函数名，必须使用new 运算符！
• 3.对象冒充的方式调用： call()和apply() 的使用，上面！
• e.g
  

  var box3=new Object();
  box.call(box3,'zhuo',2122);
  shu(box3.run());

  
  
  
• 4.原型 (prototype)
• 用途：是包含可以由特点类型的所有实例共享的属性和方法。
  prototype 通过调用构造函数而创建的那个对象的原对象！
  如果是用原型的方式的话，地址是共享的。
• e.g
  

  //原型
  function Box1(){} //构造函数体内什么都没有(实例属性和实例方法)
  Box1.prototype.name='yuan';
  Box1.prototype.age=12;
  Box1.prototype.run=function (){
  return this.name+this.age;
  };
  var box2=new Box1();
  shu(box2.run());

  
  
  
• isPrototypeOf() :判断一个对象实例（对象引用）是不是指向了原型对象，基本上，只要实例化了，就是指向了！
• 原型执行流程： 1,先查找函数实例里面的属性或方法，有，则返回 2,在查找原型中有没有属性和方法
• hasOwnProperty(属性名) ：判断实例中是否含有属性
• in 操作符 同时可以判断 原型和实例中有没有属性 e.g console.log('name' in box)
• 5.原型的 字面量
• e.g
  

  function Box(){}
  Box.prototype={
  name:'yuan',
  age:12,
  run:function (){
  return this.name+this.age;
  }
  };
  var box1=new Box();
  shu(box1.run());

  
  
  
• 6.内置引用类型的功能扩展：
• e.g:
  

  String.prototype.addstring=function(){
  return this+'添加的字符串';
  }
  console.log('yuan'.addstring());
  String.prototype.addstring=function(data){
  return this+data;
  }
  console.log('yuan'.addstring(' ming'));

  
  
  
• 7.使用原型的缺点：
  省掉了传参数；
  引用类型第一次修改后，保持了共享。
  原型里的已有的数据，不能改变。
  
  
  解决方式:
  1,使用组合模式：构造函数+原型模式；即保持独立的构造函数，保持共享的用原型；
  2,上面的方式是分开的，而最好的方式动态的原型模式；也就是封装。
  3,可以将原型封装到构造函数里。
  4,寄生构造函数：工厂模式+构造函数
  5,稳妥构造函数
• e.g :
  

  function Box(name,age){
  this.name=name;
  this.age=age;
  
  if(typeof this.run !='function'){ //判断this.run 是否出现
  Box.prototype.run=function(){
  retrun this.name+this.age;
  }
  }
  }

  
  
  
• 7.继承：原型链来实现 & 使用对象冒充继承
• 被继承的函数叫做超类型（父类型，基类）
  继承的函数叫做子类型（子类型，派生类）
• 使用：父类实例化对象后，赋值给子类型的原型属性;
  通过原型链继承 ,在继承的时候，如果属性一样的话，就近原则
• e.g
  

  function Box(){
  return this.name='yuna';
  }
  
  function Table(){
  return this.age='tbable';
  }
  
  function Desk(){
  this.name='desk name';
  return this.height='zhuo';
  }
  
  Table.prototype=new Box(); //Table继承Box,是Box的子类
  
  Desk.prototype=new Table(); //通过原型链继承Table ,在继承的时候，如果属性一样的话，就近原则
  
  var box1=new Desk();
  
  shu(box1.name+box1.age)

  
  
  
• 使用对象冒充继承：call()来对象冒充；可以解决传参问题！
  对象冒充，只能继承构造里的信息；
  构造函数里的方法，放在构造里，每次都实例化，造成浪费。
• 组合继承（原型链继承+对象冒充继承）
• 原型式继承：
• e.g :
  

  //临时中转函数 
  function obj(o){ //o是传递的对象
  function F(){} //F 构造是临时新建的对象，用来存储传递过来的对象
  F.prototype=o; //将o 对象实例赋值给F构造的原型对象
  return new F(); //返回这个得到传递过来的对象的对象实例
  }
  
  var box={
  name:'yuan',
  age:20,
  arr:['ming','zhuo']
  };
  
  var box1=obj(box);
  shu(box1.arr);
  box1.arr.push('hpu');
  shu(box1.arr);
  
  var box2=obj(box);
  shu(box2.arr); //box 引用类型的数据共享了

  
  
  
• 寄生继承：添加一个继承函数，这个寄生函数可以扩展；

    

e.g :在上面的基础上
function create(){
var f=obj(box);
f.run=function(){
return this.name;
};
return f;
}

4.匿名函数和闭包

• 匿名函数：没有名字的函数。
  闭包是可访问一个函数作业域里变量的函数。即内部函数
  闭包可以把局部变量驻留在内存中，可以避免是用全局变量。
• 实现：e.g :
  

  //通过赋值执行
  var box=function(){
  return 'ming';
  };
  shu(box());
  
  //通过自我执行
  (function (){
  shu('zhuo');
  })();
  
  //自我执行的传参
  (function (age){
  shu(age);
  })(100);
  
  //函数里放一个匿名函数
  function bo(){
  return function (){ //闭包
  return 'yuan';
  }
  }
  shu(bo()());
  var bo1=new bo();
  shu(bo1());
  
  //通过闭包返回局部变量
  function box2(){
  var age=1000;
  return function(){
  return age;
  }
  }
  shu(box2()());

  
  
  
• e.g :
  

  //循环里的匿名函数取值问题：使其自我执行
  function box(){
  var arr=[];
  for(var i=0;i<10;i++){
  arr[i]=(function(num){ //自我执行！！！！！
  return num;
  })(i);
  }
  return arr;
  }
  shu(box()[0]);

  
  
  
• 闭包中关于this对象 :闭包在运行时时指向window的，故闭包中的this是指向window的！
• 内存泄漏问题：无法注销内存中的对象！
• 私有化问题：
• 模仿块级作用域：javascript没有块级作用域的概念！
• 实现：()(); 包含自我执行的匿名函数，就可以实现私有作用域！当自我执行的私有作用域完毕后，就立即被销毁了！
• e.g :
  

  function box(){
  //使用自我执行的匿名函数
  (function(){ 
  for(var i=0;i<10;i++){
  
  }
  })();
  shu(i); //i 没有值
  }

  
  
  
• javascript没有私有属性的概念
• 可以通过get & set 来实现
• e.g :
  

  function box(){
  var name;
  this.setName=function (value){
  this.name=value;
  }
  this.getName=function(){
  return this.name;
  }
  }
  var box1=new box();
  box1.setName('yuanming');
  shu(box1.getName());

  
  
  
• 私有变量和方法：也可以采用字面量的方式创建！
• 单例：永远只实例化一次，其实就是字面量对象声明方式！

5.BOM

• BOM：浏览器模式，提供了很多对象，用于访问浏览器功能！
• window对象，location对象，history对象等
• 1)window对象是最顶层的对象，有六大属性，这六大属性本身也是对象
• 2)window对象旗下的 document属性也是对象，并且document对象旗下有五大对象，也是对象。
• 3)window的属性和方法懂得调用：window.属性 ，window.方法()
• 4)如果某个浏览器独有的属性和方法，那么在其他就懒起可能不识别，就当作普通的使用
• 5)系统对话框：alert(); confirm();返回boolean值 prompt('内容','默认值');返回输入的内容
• 6)打印：print(); 搜索：find(); 状态栏：defaultStatus=''; 和 Status=''
• 7)新建窗口：open(); window.open() 参数：URL , 窗口的名称或者窗口的目标('_blank','_parent'),特定字符串 ； opener:可以实现子窗口控制父窗口！！！
• 8)窗口的大小和位置：screenLeft和screenTop 火狐不支持;window.screenX和window.screenY IE不支持；
  跨浏览器支持：
  var left=typeof screenLeft=='number'?window.screenLeft:window.screenX;
  var top=typeof screenTop=='number'?window.screenTop:window.screenY;
• 9)定时器：间歇调用和超时调用
• 超时调用：实现：setTimeout(方法函数,毫秒数); e.g :setTimeout('shu(1)',2000);
  推荐这样写：扩展性好：
  

  setTimeout(function(){
  console.log('yuan');
  },1000);

  
  
  
• clearTimeout() 取消当前的调用计划！
• 间歇调用：可以重复不断的去执行：实现：
  setInterval(方法函数,毫秒数); e.g:
  

  var num=1;
  setInterval(function(){
  num++;
  console.log('yuan'+num);
  },1000);

  
  
  
• clearInterval()
• 使用超时调用来模拟间歇调用，使用递归调用！！！！
• 10)window.location 和 window.document.location当前地址
• 11)location.href()指向你想要去的地址 ;
  

  location.search() 获取url 问号后面的 ; 
  location.assign() 实现跳转 ;
  localtion.reload(true) 重新加载/参数为ture时,强制加载 ; 
  location.repalce('url') 不产生任何记录的调转！

  
  
  
• 12)history：历史记录
  history.length 历史记录的数量;
  history.back(); 前面的记录
  history.forward(); 后面的记录
  history.go(num); 跳到记录