主要知识点:
- 模板字符串
- 箭头函数
- 解构赋值
- Symbol 第七种数据类
- class 关键字 语法糖
- 继承 (原型继承 原型继承的问题)(构造函数继承 )(组合继承)
下面都是代码样例 看看能打印什么
/**
* Created by liuml on 2017/4/7.
*/
//模板字符串
let name = "liu";
let age = 26;
let str = name + " is " + age + " year old.";
//嵌入变量 这里`` 是1左边的键
let str1 = `${name} is ${age} year old.`;
console.log(str);
console.log(str1);
//保持原来的字符串格式
let str2 = `I love
you`;
console.log(str2);
//箭头函数
let func = function (n) {
console.log(n)
}
func(2);
//=>代表function
let func1 = n => console.log(n);
func1(1);
let func2 = function (n) {
return n * 2;
}
//自动返回值
let func2 = n => n * 2;
console.log(func2(2));
//多个参数情况
let func3 = (a, b) => {
a += 3;
return a + b;
};
console.log(func3(3, 4));
// 箭头函数返回对象
var initobj = id => ({id: id, name: "default"});
console.log(initobj(2));
//解构赋值
//拼接得到完整的名称
let full = ({first, last}) => first + "_" + last;
console.log(full({first: "begin", last: "end"}));
//map
var arr = [1, 2, 3, 4].map(function (n) {
return n * 2;
})
console.log(arr);
var arr = [1, 2, 3, 4].map(n => n * 2);
console.log(arr);
//排序 升序
var arr = [1, 4, 5, 2].sort(function (a, b) {
return a - b;
})
console.log(arr);
var arr = [1, 5, 3, 2].sort((a, b) => a - b);
console.log(arr);
//============================
//Symbol 第七种数据类型
//表示独一无二的值
//举例
//属性覆盖
let obj = {name: "liu"};
obj.name = function () {
console.log("wang");
}
obj.name();
//使用symbol 给对象添加属性
let obj = {name: "liu"};
let name = Symbol();
obj[name] = function () {
console.log("wang");
}
console.log(obj.name);
obj[name]();
//每一次调用symboi 都是不同的值
//=== 和 == 的区别
// let a = Symbol();
// let b = Symbol();
// console.log(a === b);
//==(等于)与 ===(恒等于)的区别
//==(等于)
// 1、如果两个值类型相同,进行 == 比较。
// 2、如果两个值类型不同,他们可能相等。根据下面规则进行类型转换再比较:
// a、如果一个是null、一个是undefined,那么[相等]。
// b、如果一个是字符串,一个是数值,把字符串转换成数值再进行比较。
// c、如果任一值是 true,把它转换成 1 再比较;如果任一值是 false,把它转换成 0 再比较。
// d、如果一个是对象,另一个是数值或字符串,把对象转换成基础类型的值再比较。对象转换成基础类型,利用它的toString或者valueOf方法。 js核心内置类,会尝试valueOf先于toString;例外的是Date,Date利用的是toString转换。
// console.log({} == "abc");
// console.log("1" == 1);
// console.log("abc" == 'abc');
// let a = null;
// console.log(a == undefined);
//
// console.log(true == "1");
//===(恒等于)
// 1、如果类型不同,就[不相等]
// 2、如果两个都是数值,并且是同一个值,那么[相等];(!例外)的是,如果其中至少一个是NaN,那么[不相等]。(判断一个值是否是NaN,只能用isNaN()来判断)
// 3、如果两个都是字符串,每个位置的字符都一样,那么[相等];否则[不相等]。
// 4、如果两个值都是true,或者都是false,那么[相等]。
// 5、如果两个值都引用同一个对象或函数,那么[相等];否则[不相等]。
// 6、如果两个值都是null,或者都是undefined,那么[相等]。
// console.log("1" === 1);
//class 关键字
function User(name, age) {
this.name = name;
this.age = age;
}
//prototype
User.prototype.printName = function () {
console.log(this.name);
}
//class 语法糖 添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会.
class User {
//构造函数
constructor(name, age) {
this.name = name;
this.age = age;
}
printName() {
console.log(this.name);
}
}
let test = new User("testName", "26");
test.myName();
console.log(typeof User);
//事实上, 类的所有方法都定义在原型上的
//继承
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return "x = " + this.x + ",y = " + this.y;
}
}
//继承
class My3DPoint extends Point {
constructor(x, y, z) {
super(x, y);
this.z = z;
}
toString() {
return "3D : " + super.toString() + ",z = " + this.z;
}
}
//调用
let p1 = new My3DPoint(20, 30, 40);
console.log(p1.toString());
//静态
var count = 0;
class My3DPoint extends Point {
constructor(x, y, z) {
super(x, y);
this.z = z;
}
toString() {
return "3D : " + super.toString() + ",z = " + this.z;
}
static count() {
return count++;
}
}
//调用
let p1 = new My3DPoint(20, 30, 40);
console.log(My3DPoint.count());
console.log(My3DPoint.count());
console.log(My3DPoint.count());
//new.target
//根据new.target是否返回undefined,来判断构造函数是怎么调用的
function Person(name) {
if (new.target !== undefined) {
this.name = name;
} else {
throw new Error('必须使用new生成实例');
}
}
// 另一种写法
function Person(name) {
if (new.target === Person) {
this.name = name;
} else {
throw new Error('必须使用new生成实例');
}
}
var p1 = new Person('张三'); // 正确
var p2 = Person.call(person, '张三'); // 报错
//原型继承
//父类型
function SupType() {
this.flag = true;
}
SupType.prototype.getFlag = function () {
return this.flag;
}
//子类型
function SubType() {
this.subFlag = true;
}
//有点像多态
SubType.prototype = new SupType();
//拷贝过程(可以这么理解)
//new SuperType() -> SubType.prototype -> s1
//检查是否继承了父类型的属性
var s1 = new SubType();
console.log(s1.getFlag());
//原型继承的问题
function SuperType() {
this.x = 10;
this.color = ["red", "green", "blue"];
}
SuperType.prototype.getXX = function () {
return "xx";
}
//子类型
function SubType() {
this.subFlag = false;
}
SubType.prototype = new SuperType();
var subType = new SubType();
subType.color.push("white");
console.log(subType.color);
var subType2 = new SubType();
console.log(subType2.color);
//继承 原因原型共享
//原型的问题:当原型包含引用类型的属性时,这些属性会被所有实例共享
//构造函数继承 解决原型对象上面 属性共享问题
function SuperType() {
this.colors = ["red", "green", "blue"];
}
function SubType() {
//继承属性
SuperType.call(this);//独立内存
//相当于
/*function SuperType(){
s1.colors = ["red","green","blue"];
}*/
}
var s1 = new SubType();
s1.colors.push("white");
console.log(s1.colors);
var s2 = new SubType();
console.log(s2.colors);
//也有问题 复用问题
//组合继承
//原型+构造函数继承 jquery 主流框架基本用的都是
function SuperType(name) {
this.name = name;
this.colors = ["red", "green", "blue"];
}
SuperType.prototype.sayHi = function () {
console.log("sayHi");
}
function SubType(name, age) {
//继承属性
SuperType.call(this, name);
this.age = age;
}
//继承函数
SubType.prototype = new SuperType();
//构造函数不能错 constructor判断,当前对象由哪一个构造函数实例化出来的
SubType.prototype.constructor = SubType;
//子类自己的函数
SubType.prototype.sayAge = function () {
console.log(this.age);
}
var s1 = new SubType("jack", 20);
s1.sayHi();
s1.sayAge();
s1.colors.push("white");
console.log(s1.colors);
// console.log(s1);
var s2 = new SubType("jason", 20);
console.log(s2.colors);
//根据constructor判断,当前对象由哪一个构造函数实例化出来的 \
// console.log(s2.constructor === SubType);
// console.log(s2.constructor === SuperType);