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();