主要知识点:
下面都是代码样例 看看能打印什么
- /** * 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);