【JavaScript】 进阶教程 施工中~

// 每个函数都有一个prototype属性。它默认指向一个Object空对象（即成为：原型对象）
console.log(Date.prototype, typeof Date.prototype);
function fun(){
    
}

console.log(fun.prototype);// 默认指向一个object空对象（没有我们定义的属性）

// 原型对象中有一个属性constructor，它指向函数对象
console.log(Date.prototype.constructor === Date); // true
console.log(fun.prototype.constructor === fun); // true

// 给原型对象添加属性（一般是方法）——> 实例对象可以访问
fun.prototype.test = function() {
    console.log('test原型对象添加');
}
var f = new fun();
f.test(); // test原型对象添加

function Fn(){ // 内部语句：this.prototype = {}
    
}
// 每个函数function都有一个prototype，即显式原型属性，默认指向一个空的object对象
console.log(Fn.prototype);
// 每个实例对象都有一个__proto__。可以称为隐式原型
var fn = new Fn(); // 内部语句：this.__proto__ = Fn.prototype
console.log(fn.__proto__);
// 对象的隐式原型的值为其对应构造函数的显示原型的值
console.log(Fn.prototype === fn.__proto__);// true
// 给原型对象添加方法
Fn.prototype.test = function(){
    console.log('给原型对象添加方法')
}
fn.test()

function Fn(){
    this.test1 = function(){
        console.log('test()');
    }
}
Fn.prototype.test2 = function(){
    console.log('test2()')
}

var fn = new Fn();
fn.test1();
fn.test2();

function Fn(){
    this.test1 = function() {
      console.log('test1()');
    }
  }

var fn = new Fn();

console.log(Fn.prototype instanceof Object); // true
console.log(Object.prototype instanceof Object); // false
console.log(Function.prototype instanceof Object); // true

// 所有函数都是Function的实例（包含Function自身）
console.log(Function.__proto__ === Function.prototype); // true

// Object的原型对象是原型链的尽头
console.log(Object.prototype.__proto__); // null

// 输出undefined
var a = 3;
function fn() {
    console.log(a);
    var a = 4;
}
fn();
// 在fn函数内部 var a = 4; 实际上等于下列代码
function fn() {
    var a; // 这里的 var a; 就是变量提升
    console.log(a); // 所以这里输出undefined
    a = 4;
}

// fn2 在通过 function 声明函数， 在之前就可以直接调用。函数声明提升
fn2();
function fn2() {
    console.log('fn2()');
}

fn3(); // 这里不能调用，因为下面属于是变量提升，并不是函数提升。 函数提升需要通过 function 声明
var fn3 = function() {
    console.log('fn3()');
}

// 函数执行上下文
function fn(a1) {
    console.log(a1); // 2
    console.log(a2); // undefined
    a3(); // a3()
    console.log(this); // window，这里是window因为下面的调用方式是fn(2, 3)
    console.log(arguments); // 伪数组(2,3)
    
    var a2 = 3;
    function a3() {
        console.log('a3()');
    }
}
fn(2, 3);

var a = 10;
var bar = function(x) {
    var b = ;
    foo(x + b);
}
var foo = function(y) {
    var c = 5;
    console.log(a + c + y); // 下图不考虑改打印函数的上下文
}
bar(10)

/**
 * 1、依次输出了什么？
 * 2、整个过程中产生了几个执行上下文？
 */
console.log('global begin:' + i);
var i = 1;
foo(1);
function foo(i) {
    if (i == 4) {
        return;
    }
    console.log('foo() begin:' + i);
    foo(i + 1); // 在函数中调用自己称为递归
    console.log('foo() end:' + i);
}
console.log('global end:' + i);

/**
1:
undefined
foo() begin:1
foo() begin:2
foo() begin:3
foo() end:3
foo() end:2
foo() end:1
global end:1

每次调用自己时并没有执行到 foo() end，而在 i == 4 中return后函数会按照栈中顺序一个一个执行剩余代码并出栈，所以此时执行foo() end
*/

/**
2：不考虑console.log()
4 + 1 次（4次foo，一次全局）
*/

/**
 * 1
 */
function a() {}
var a;
console.log(typeof a); // 输出：function。因为先进行变量提升再进行函数提升。所以后提升的函数a()生效

/**
 * 2
 */
if (!(b in window)) { // b in window 为true 因为写了 var b，即已进行变量提升
    var b = 1;
}
console.log(b); // undefined 下列为测试代码
if (false) {
	var b = 1;
}
console.log(b in window); // true

/**
 * 3
 */
var c = 1;
function c(c) {
    console.log(c);
}
c(2); // 报错，c is not a function 原因：先进行变量提升，然后进行函数提升，最后执行代码。
// 相当于下列代码，先声明c，在执行c(2)前对c进行赋值，使其变成变量，并非一个function
var c;// 先变量提升
function c(c) { // 后函数提升，函数提升时执行（执行不代表调用）
    console.log(c);
}
c = 1; // 变量提升与函数提升后执行进行赋值
c(2);

if (true) {
  var a = 4; // 在大括号外部也可以访问到a，没有大括号的块作用域
}

// 全局作用域
var a = 10,
  b = 20;
function fn(x) { // 函数作用域 fn
  var a =100, // 变量隔离
    c = 300;
  console.log('fn()', a, b, c, x);
  function bar(x) { // 函数作用域 bar
    var a = 1000, // 变量隔离
      d = 400;
    console.log('bar()', a, b, c, d, x);
  }

  bar(100);
  bar(200);
}
fn(10);

var a = 1;
function fn1() {
  var b = 2;
  function fn2() {
    var c = 3;
    console.log(c); // 3
    console.log(b); // 2
    console.log(a); // 1
    console.log(d); // 报错 d is not defined
  }
  fn2();
}
fn1();

<body>
<button>测试1</button>
<button>测试2</button>
<button>测试3</button>
<script type="text/javascript">
  var btns = document.getElementsByTagName('button');
  // 遍历加监听
  /*
  这种方式无法正确弹出按钮所对应的值，因为 i 是在全局作用域中的变量，当for循环绑定事件后，点击执行事件函数函数中 i 访问到的是外部的全局变量，而此时 i 的值是循环后的值
  for (var i = 0,lengths = btns.length; i < lengths; i++) {
    var btn = btns[i];
    btn.onclick = function() {
      alert('第' + (i + 1) + '个');
    }
  }*/
/*
  将下标保存到按钮上
  for (var i = 0,lengths = btns.length; i < lengths; i++) {
    var btn = btns[i];
    btn.index = i; // 将btn所对应的下标保存到btn上
    btn.onclick = function() {
      alert('第' + (this.index + 1) + '个');
    }
  }*/

  // 利用闭包
  for (var i = 0,lengths = btns.length; i < lengths; i++) {
    (function(i) {
      var btn = btns[i];
      btn.onclick = function() {
        alert('第' + (this.index + 1) + '个');
      }
    })(i);
  }
</script>
</body>

function fn1() {
    var a= 2;
    function fn2() {
        a++;
        console.log(a);
    }
    return fn2;
}
var f = fn1(); // 这里进行调用外部函数产生了 1 个闭包
f(); // 输出 3
f(); // 输出 4

function fn(msg, time) {
    setTimeout(function() {
        alert(msg);
    }, time);
}
fn('msg', 2000);

// 下列代码中就起到了对变量a的生命周期延长，当fn1执行后fn2与fn3产生了闭包，通过返回fn2或者fn3并接收调用则可实现对变量a的加1或减1操作，而除了加减外不可对变量a进行其它操作。
function fn1() {
    var a = 2;
    function fn2() {
      a++;
      console.log(a);
    }
    function fn3() {
      a--;
      console.log(a);
    }
    return fn3;
  }
  var f = fn1();
f();

function fn1() {
    var a = 2;
    function fn2() {
      a++;
      console.log(a);
    }
    function fn3() {
      a--;
      console.log(a);
    }
    return fn3;
  }
  var f = fn1(); // fn1的函数执行完成后会释放，这里返回了fn3被变量f所引用。所以内部函数fn3并没有被释放。
// fn1(); 这里如果没有引用指向则执行完成后就会成为垃圾对象被释放。
f();

function fn1() {
    // 此时闭包就已经产生了（函数提升，内部函数对象已经创建了）
    var a = 2;
    function fn2() {
        a++;
        console.log(a);
    }
    return fn2;
}
var f = fn1();
f();
f();
f = null; // 闭包死亡（包含闭包的函数对象成为垃圾对象）

// myModule.js
function myModule() {
  // 私有数据
  var msg = 'My Module';
  // 操作数据的函数
  function doSomethiing() {
    console.log('doSomething()', msg.toUpperCase());
  }
  function doOtherthing() {
    console.log('doOtherthing()', msg.toLowerCase());
  }

  // 向外暴露对象（给外部使用的方法）
  return {
    doSomethiing: doSomethiing,
    doOtherthing: doOtherthing
  }
}

<!-- index.html -->
<!doctype html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
</body>
<script type="text/javascript" src="js/myModule.js"></script>
<script type="text/javascript">
  var module = myModule();
  module.doSomethiing();
  module.doOtherthing();
</script>
</html>

(function myModule2() {
  // 私有数据
  var msg = 'My Module';
  // 操作数据的函数
  function doSomethiing() {
    console.log('doSomething()', msg.toUpperCase());
  }
  function doOtherthing() {
    console.log('doOtherthing()', msg.toLowerCase());
  }

  // 向外暴露对象（给外部使用的方法）要暴露的对象给window
  window.myModule2 = {
    doSomethiing: doSomethiing,
    doOtherthing: doOtherthing
  }
})();

<!-- index.html -->
<!doctype html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
</body>
<script type="text/javascript" src="js/myModule2.js"></script>
<script type="text/javascript">
  myModule2.doSomethiing();
  myModule2.doOtherthing();
</script>
</html>

<script type="text/javascript">
function fn1() {
    var arr = new Array[10000000];
    function fn2() {
      console.log(arr.length);
    }
    return fn2;
  }
  var f = fn1();
  f();
  f = null; // 让内部函数成为垃圾对象-->回收闭包
</script>

// 意外的全局变量
function fn() {
    a = new Array(100000000); // 没有使用var定义局部变量，导致a变为意外的全局变量。
}
fn();

// 没有及时清理的计时器或回调函数
var intervalId = setInterval(function() {
    console.log('------------');
}, 1000); // 使用完计时器没有清理
// clearInteval(intervalId);

// 闭包
function fn1() {
    var a = 4;
    function fn2() {
        console.log('---', a);
    }
    return fn2;
}
var f = fn1();
f(); // 使用完闭包没有清理
// f = null;

var p = new Object();
p.name = 'Tom';
p.age = 12;
p.setName = function(name) {
    this.name = name;
}

p.setName('JACK');
console.log(p.name, p.age);

var p = {
    name: 'Tom',
    age: 12,
    setName: function(name) {
        this.name = name;
    }
}

// 测试
console.log(p.name, p.age);
p.setName('JACK');
console.log(p.name, p.age);

var p2 = { // 如果创建多个对象代码很重复
    name: 'Bob',
    age: 13,
    setName: function(name) {
        this.name = name;
    }
}

function createPerson(name, age) {
    var obj = {
        name: name,
        age: age,
        setName: function(name) {
            this.name = name;
        }
    }
    return obj;
}

// 创建两个对象
var p1 = createPerson('Tom', 12);
var p2 = createPerson('Bob', 13);

function createStudent(name, price) {
    var obj = {
        name: name,
        price: price
    }
    return obj;
}
var s = createStudent('张三', 12000);
// 这里 p1、p2、s也都是Object类型。所以对象没有一个具体的类型。

// 定义类型
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.setName = function(name) {
        this.name = name;
    }
}
var p1 = new Person('Tom', 13);
p1.setName('Jack');
console.log(p1.name, p1.age);
console.log(p1 instanceof Person);// true

function Studen(name, price) {
    this.name = name;
    this.price = price;
    this.setName = function(name) {
        this.name = name;
    }
}
var s1 = new Studen('KC', 1200);
s1.setName('KAKA');
console.log(s1.name, s1.price);
console.log(s2 instanceof Studen);// true 这里和绗棉的p1就分别有了自己的类型

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.setName = function(name) { // 将方法放到原型中
    this.name = name;
}

var p1 = new Person('Tom', 12);
var p2 = new Person('Bob', 13);
p1.setName('JACK'); // p1与p2都有各自的属性，而方法在原型上，他们的原型都是同一个，所以公用了一个方法

// 父类型
function Supper() {
    this.supProp = 'Supper property';
}
Supper.prototype.showSupperProp = function() {
    console.log(this.supProp);
}

// 子类型
function Sub() {
    this.subProp = 'Sub property';
}

// 子类型的原型为父类型的一个实例对象
Sub.prototype = new Supper();
Sub.prototype.showSubProp = function() {
    console.log(this.subProp);
}
var sub - new Sub();
sub.showSupperProp();
sub.showSubProp();

function Person(name, age) {
    this.name = name;
    this.age = age;
}
function Student(name, age, price) {
    Person.call(this, name, age); // 相当于：this.Person(name, age);
    this.price = price;
}

var s = new Student('Tom', 20, 10000);
console.log(s.name, s.age, s.price);

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.setName = function(name) {
    this.name = name;
}

function Student(name, age, price) {
    Person.call(this, name, age); // 为了得到父类型属性
    this.price = price;
}
Student.prototype = new Person(); // 为了能看到父类型的方法
Student.prototype.constructor = Student; // 修正contructor属性
Student.prototype.setPrice = function(price) {
    this.price = price;
}

// test
var s = new Student('Tom', 24, 15000);
s.setName('Bob');
s.setPrice(11100);
console.log(s.name, s.age, s.price);

<button id='btn'>
    启动定时器
</button>
<script type="text/javascript">
	document.getElementById('btn').onclick = function() {
        var start = Date.now();
        console.log('启动定时器前...')
        setTimeout(function() {
            console.log('定时器执行了', Date.now() - start);
        }, 200);
        console.log('启动定时器后...')
        
        // 以下做一个长时间的工作会使定时器延迟很长（不可接受范围）
        for(var i = 0; i < 1000000; i++) { // 通过长时间循环延长定时器执行
            
        }
    }
</script>

setTimeout(function() {
    console.log('timeout 2000')
}, 2000);
setTimeout(function() {
    console.log('timeout 1000');
    alert('1000');
}, 1000);
setTimeout(function() {
    console.log('timeout 0');
}, 0);
function fn() {
    console.log('fn()');
}
fn();

console.log('alert()之前');
alert('--------'); // 暂停当前主线程的执行，同时暂停计时，点击确定后，恢复程序执行和计时器
console.log('alert()之后');
/*
执行顺序：
fn()
alert()之前
弹出alert，点击确定
alert()之后
timeout 0
一秒后：timeout 1000
弹出alert 1000，点击确定
一秒后：timeout 2000
*/

<button id='btn'>
    测试
</button>
<script type="text/javascript">
	function fn1() {
        console.log('fn1()');
    }
    fn1();
    document.getElementById('btn').onclick = function() {
        console.log('点击了btn');
    }
    setTimeout(function() {
        console.log('定时器执行了');
    }, 2000);
    function fn2() {
        console.log('fn2()');
    }
    fn2();
</script>
<!--
执行顺序：
fn1()
fn2()
定时器与按钮的先后顺序不确定
-->

<!-- 使用递归计算所输入数字所在斐波那契数列的值 -->
<!-- 此计算方法当计算位数较大时则会使整个界面不可操作等待计算结果。主线程一直在计算中 -->
<input type="text" placeholder="数值" id="number" />
<button id='btn'>
    计算
</button>
<script type="text/javascript">
	function fibonacci(n) {
        return n <= 2 ? 1 :fibonacci(n-1) + fibonacci(n-2); // 递归调用
    }
    var input = document.getElementById('number');
    document.getElementById('btn').onclick = function() {
        var number = input.value;
        var result = fibonacci(number);
        alert(result);
    }
</script>

<input type="text" placeholder="数值" id="number" />
<button id='btn'>
    计算
</button>
<script type="text/javascript">
  var input = document.getElementById('number');
  document.getElementById('btn').onclick = function () {
    var number = input.value;

    // 创建一个Worker对象
    var worker = new Worker('myWorker.js');
    // 向分线程发送消息
    worker.postMessage(number);
    // 绑定接收消息的监听
    worker.onmessage = function (event) {
      console.log('主线程接收封线程返回的数据', event.data);
      alert(event.data);
    }
  }
</script>

// myWorker.js
function fibonacci(n) {
  return n <= 2 ? 1 : fibonacci(n-1) + fibonacci(n-2); // 递归调用
}

var onmessage = function(event) {
  var number = event.data;
  console.log('分线程接收到主线程发送的数据：', number);
  // 计算
  var result = fibonacci(number);
  postMessage(result);
  // alert(result); alert是window的方法，在分线程中不能调用
  // console是浏览器实现的所以可以使用
  // 分线程中有自己的全局对象
  // 分线程中的全局对象不再是window，所以在分线程中不可能跟新界面
}