04_JS高级

1.JS原型

JS中对象都有一个原型对象。原型对象也一个原型。

Object对象的原型没有原型。

当使用一个对象的属性或方法时，如果自身没有，则向上寻找，直到找到头，没有则返回undefined

显式原型：prototype,是在构造函数上

隐式原型：__ proto__，是在实例对象上

隐式原型指向创建这个对象的构造函数的prototype

function T() {
    console.log(1);
}
console.log(T.__proto__);
console.log(T.__proto__.hasOwnProperty("hasOwnProperty"));
console.log(T.__proto__.__proto__);
console.log(T.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));
console.log(T.__proto__.__proto__.__proto__);

2.改变this指向

//使用.call()或者.apply()
//两种方法的区别是apply之后的参数需要使用数组，而call可以直接用逗号接下去
function fun(a, b) {
    console.log(this);
    console.log(a);
    console.log(b);
}
var T = {
    id: 1,
};
fun(1, 2);
console.log("-----------");
fun.apply(T, [1, 2]);
console.log("-----------");
fun.call(T, 1, 2);

3.执行上下文

JS执行全局代码前会先进行预处理，即将var定义的全局变量和声明的函数挂载到.window上

//不会报错
console.log(a)
fn();
var a = 3;
function fn(){
    console.log("调用")
}
//会报错,必须要使用函数声明的方式
fn1();
var fn1 = function () {
    console.log("报错");
};
//函数中同理
fn2();
function fn2() {
    console.log(b);
    var b = 1;
}

4.变量提升，函数提升

//函数提升优先级比变量提升高
function a() {}
var a;
console.log(typeof a);

//b已经提升了
if (!(b in window)) {
    var b = 1;
}
console.log(b);

//报错,因为先提升函数，然后c再被提升赋值了1，所以c不是一个函数了
var c = 1;
function c(c) {
    console.log(c);
}
c(2);

5.闭包

内部函数引用外部变量

作用：在函数外部操作函数内部的局部变量

function fn1() {
        var a = 2;
        function fn2() {
          a++;
          console.log(a);
        }
        return fn2;
      }
      var f = fn1();
      f(); //3
      f(); //4

      console.log("---------------");
      var name = "the window";
      var object = {
        name: "my object",
        getNameFunc: function () {
          return function () {
            return this.name;
          };
        },
      };
      //通过object执行完返回的是function,在用一个()执行，此时是window的执行
      console.log(object.getNameFunc()());
      console.log("---------------");
      var name2 = "thew window2";
      var object2 = {
        name2: "my object2",
        getNameFunc: function () {
          var that = this;
          return function () {
            return that.name2;
          };
        },
      };
      //和上一个类似，this也是window，但返回的是that，而that是通过object调用的
      console.log(object2.getNameFunc()());
      console.log("---------------");
      function fun(n, o) {
        console.log(o);
        return {
          fun: function (m) {
              //此处形成闭包,n变量还存在
            return fun(m, n);
          },
        };
      }
      var a = fun(0);
      a.fun(1);
	  console.log("~~~~~~~~~~~");
      a.fun(2);
	  console.log("~~~~~~~~~~~");
      a.fun(3);
	  console.log("~~~~~~~~~~~");

      var b = fun(0).fun(1).fun(2).fun(3);
	  console.log("~~~~~~~~~~~");
      var c = fun(0).fun(1);
      c.fun(2);
      c.fun(3);

6.原型链继承

子父类关系

//父类
function supper() {
    this.supprop = "supper pro";
}
supper.prototype.showsupperpro = function () {
    console.log(this.supprop);
};
//子类
function sub() {
    this.subprop = "sub pro";
}
//原型链挂载父类一个实例对象
sub.prototype = new supper();
sub.prototype.showsubpro = function () {
    console.log(this.subprop);
};

var sub = new sub();
//使用父类方法
sub.showsupperpro();
sub.showsubpro();

7.事件循环

8.ES6

1.模板字符串

//1.可以直接出现换行符
let str = `哈哈哈
嘻嘻嘻`;

//2.变量拼接
let str2 = `${str}是语气词`;
console.log(str2);

2.箭头函数

//1.使用剪头函数的this是静态的，始终指向函数声明时所在作用域下的this的值
function getName() {
    console.log(this.name);
}
var getName2 = () => {
    console.log(this.name);
};
window.name = "rokned";
var school = {
    name: "rok",
};
getName();
getName2();
console.log("------------");
getName.call(school);
getName2.call(school);

//2.不能作为构造实例化对象
var person = (name) => {
    this.name = name;
};
//   var p1 = new person("rokned");

//3.不能使用arguments变量
function f1() {
    console.log(arguments);
}
f1(1, 2, 3);
//   var f2 = () => {
//     console.log(arguments);
//   };
//   f2(1, 2, 3);

//4.省略写法
//当只有一个形参时,省略括号
let add = (n) => {
    return n + n;
};
console.log(add(1));
//当只有一条代码语句时，省略花括号和return
let pow = (n) => n * n;
console.log(pow(2));

3.不定参数(rest参数)

function fn(a, b, ...args) {
    console.log(a, b);
    console.log(...args);
}
fn(1, 2, 9, 8, 7);

4.promise

可以进行链式调用

//实例化promise对象
const p = new Promise(function (resolve, reject) {
    setTimeout(() => {
        let data = "数据成功";
        let err = "数据失败";
        //resolve表示调用成功
        //   resolve(data);
        //reject表示调用失败
        reject(err);
    }, 1000);
});
//调用promise对象的then方法,value表示成功的参数,reason表示失败的参数
p.then(
    function (value) {
        console.log(value);
    },
    function (reason) {
        console.error(reason);
    }
);

5.async和await

//创建promise对象
const p = new Promise((resvole, reject) => {
    // resvole("成功");
    reject("失败");
});
//await要放在async函数中，返回的是成功或者失败的值
async function main() {
    try {
        let res = await p;
        console.log(res);
    } catch (e) {
        console.log(e);
    }
}
main();