主要知识点:
下面都是代码样例 看看能打印什么
/** * 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,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,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,z = " + this.z;
}
static count() {
return count++;
}
}
//调用
let p1 = new My3DPoint(20,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","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","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);