面向对象高级( 随手记-6)

setTimeout 的作用: 
指定一个时间,经过一段时间后执行代码(定时器)
两个参数: 回调函数  时间!
会在至少经过指定的时候后执行回调函数!

可以把setTimeout/setInterval 中的代码看作是异步执行的
代码,这里的回调函数总是被延后执行的;

JavaScript 是一门单线程的语言;
JS会优先执行除了 settimeout/ajax 等回调函数中的代码;
执行完毕以后,再来执行 这些回调函数中的代码!

JS中的时间循环:
JS是一门事件驱动型语言,在js中是通过回调函数实现事件的
驱动机制;

只要牵扯到异步执行的代码,都需要有一个回调函数;

与JS相关的三个常驻的线程:
1. 主线程   : 执行JS代码

2.事件循环线程  : 将事件队列中的函数取出来,然后交给主线程

最终回调函数的代码还是由主线程来执行的;

 

3.UI渲染线程
作用 : 渲染页面
_______________________________________________

其中,JS主线程 和 UI渲染的线程 是互斥的,也就是同时只能有
一个线程在执行; //为什么不能将JS代码放到head中引用的原因
(用户会先看到白屏的效果,体验不好!)

队列:先进先出    栈: 先进后出

调用setTimeout 就是将函数(值)放到时间队列中
_______________________________________________

this :

函数的四种调用模式说明
1.函数调用模式
2.方法调用模式
3.构造函数调用模式
4.借用方法调用模式(上下文调用模式)(call / apply)

这4种模式 就是按照函数内部 this 指向的不同来区分的!!

1.函数调用模式:
var fn=function (){ console.log(this)}
fn();   //此时 this 指向 window;

2.方法调用模式
var obj={ name:'xm',fn:function(){console.log(this)}};
obj.fn();  //this  --> 当前对象(调用方法的对象)

3.构造函数调用模式:
var Person =function(){console.log(this)};
new Person(); // this --> 该构造函数的实例对象

4.借用方法调用模式:
call / apply
语法: 函数名.call() / 函数名.apply()
作用: 调用函数, 并且在调用的同时可以修改函数内部this的指向
call和apply 是由 Function.prototype 来提供的;
console.dir() //打印全部
______
apply 

方法: 两个参数
1.参数1:表示函数内部this的指向//让第一个参数表示的对象调用
该方法;
2.参数2:是一个数组 或者 伪数组//数组/伪数组中的每一项元素
会作为被调用方法的参数;

第一个参数作用: 
var fn =function(){ }; 
//fn.apply(null/undefined/window) //模拟函数调用方法
var obj={name:''这是对象};
fn.apply(obj); // 相当于 obj.fn();  fn借用obj的方法

第二个参数作用:
var fn =function(num1,num2){ }
//fn.apply(obj)  // 模拟方法调用模式
var obj={name:''这是对象};
fn.apply(obj,[1,2])  //后面1,2作为fn的两个参数
______
call 

方法和apply 方法相同 
借用方法,改变函数内部this 的指向;
第二个参数有多个参数
fn.call(thisArg ,arg1 ,arg2 , ...)
后面所有的参数,都作为被调用方法的参数;//唯一的不同点  

apply 和 call 方法的第一个参数要求必须是一个对象,如果传
入的不是对象,那么会在内部将其转化为 对象在使用;
___________________________________________________

基本类型   包装类型

var num =new Number(123);
console.log(typeof num) //object   包装类型

数值对象在进行运算的时候,先转换为数值类型,在进行计算;

包装类型的作用:
因为只有对象才能访问属性或方法,所以number调用toString
方法:js引擎会帮我们创建一个包装类型的对象(Number(num))
然后使用该对象来调用toString方法
____________________________________________________

分析this的问题只需要明白两点:
1.分析this是属于哪个函数
2.分析该函数是以什么模式被调用的

分析this问题:只看函数是怎么调用的,不管函数是怎么来的!
______________________________________________________

线程:
ajax来说: 浏览器提供了一个线程来帮我们发送ajax请求,
发送请求的回调函数也被放到事件队列中,等到请求成功以后
此时回调函数需要被执行,,js是js代码,都由js主线程来执行;

1.主线程  2.事件循环线程(遍历事件队列,查看有没有等待执行的
回调函数)   3.UI渲染线程(渲染页面)
_____________________________________________________

arguments 与 函数参数的区别:

var fn = function(num) {
num=200;
console.log(num);   //200
console.log(arguments[0]);  //200
//形参的值放生改变后,arguments中相应的值也会发生改变
//因为函数内部对这两个值做了同步;
}
fn(100);
______________________________________________________

数组添加:
________
push方法:

var list=[];
[].push.apply(list,dvs);
[].push.apply(list,ps);
_________
concat方法:

Array.prototype.concat ===[].concat  //借用

//借用数组的concat 方法: 将数组进行合并;
//借用数组的slice 方法: 将伪数组转化为真数组;
list=[].concat.apply([].slice.apply(dvs),ps);
____________________________________________________

构造函数与普通函数的区别

1. 函数内部this的指向不同;
构造函数的返回值: 新创建的实例对象
构造函数中的this: 新创建的实例对象

2. 返回返回值不同;

如果构造函数中有返回值:
1.返回一个基本类型(5种); 此时返回值 会被忽略掉
2.返回一个引用类型(对象);此时返回值 :返回的对象;new创建
出来的实例对象就被忽略掉了!

//工厂模式:
隐藏了创建对象的过程(new构造函数  实例化的过程)
var createPerson =function(){ return Person(); };
var p1 = createPerson();  //省略了new
____________________________________________________

Object.prototype.toString  方法

这个方法会打印当前实例对象的构造函数的名称
[object Array]
______________________________________________________

借用构造函数实现继承
var Person=....

var Student =function(){
     Person.call(this,name,age,gender);
}

//继承Person.prototype 中的方法
Student.prototype = nrw Person();

笔记连载中 , 纯手打 , 个人笔记 , 不喜勿喷 ,欢迎改正!