javascript 面向对象+ECMAScript 6基础

javascript 面向对象

1.内置对象

2.自定义对象

第一种方法new对象：

  var  student = new Object();

   student.name="小丑";

   student.age=18;

   student.sex='男';

   student.show=function(){alert(this.name)};



   student.show();  //调用

   alert(student.age);

第二种方法字面量:

 var stu = {

  name:"慢慢",

  age:18,

  email:"2222@qq.com",

  show:function(){
    alert(this.age);

  }

 };



 stu.show();

第三种工厂模式：

function crateStudent(name, sex, age, hobby) {

​      var stu = new Object();

​      stu.name = name;

​      stu.sex = sex;

​      stu.age = age;

​      stu.hobby = hobby;

​      stu.show = function () {

​        alert(this.name);

​      }

​      return stu;

​    }



​    var stu1 = crateStudent("五号病", "男", 18, "吃皮蛋");

​    stu1.show();

​    var stu2 = crateStudent("易大师", "女", 28, "吃喝");

​    stu2.show();

第四种构造函数

//创建构造函数  注意构造函数的名字一定要大写开头

function Student(name,sex,age){

  this.name=name;

  this.sex=sex;

  this.age=age;

  this.show=function(){

​    alert(this.name);

  }

}

//调用构造函数

var stu1 = new Student("好的","中间",88);

stu1.show(); //调用方法

第五种改写构造函数

其实就是把上面的方法抽出类公共的

function Student(name,sex,age){

  this.name=name;

  this.sex=sex;

  this.age=age;

  this.show=show;



}

function show(){

  alert(this.name);

}

var stu1 = new Student("好的","中间",88);

stu1.show();

第六种写法原型对象

主要解决上面 私有方法抽出去变成了公开的方法的问题 使用原型对象创建的属性和方法 会共享

   //原型对象

​    function Student() { }  //第一步创建构造函数

​    Student.prototype.name = "哈哈";  //通过prototype 来点出属性和方法

​    Student.prototype.age = 27;

​    Student.prototype.arr = [1, 2]; 

​    Student.prototype.show = function () {

​      alert(this.name);

​    }



​    var weitian = new Student();

​    weitian.arr.push(3); // 私人添加的3

​    weitian.name = "哈 "; //私人的改成哈 

​    alert(weitian.arr);

​    var haobing = new Student();

​    alert(weitian.arr);  //1,2,3  说明引用类型的空间被共享 不会被私人占有其他的会被重写

​    alert(weitian.name);  //哈哈    

第六种写法 原型链 在原型对象的基础上多了一个继承

//继承

    function Person() { this.foot = 2; }

​    Person.prototype.getFoot = function () {

​      return this.foot;

​    };



​    function Women() { this.head = 1 }

​    Women.prototype = new Person();  // 继承

​    Women.prototype.getHead = function () {

​      return this.head;

​    };



​    var w =  new Women();

​    alert(w.getFoot());





​    alert(w instanceof Women);

​    alert(w instanceof Person);

​    alert(w instanceof Object);

重写

    function Person() { this.foot = 2; }

​    Person.prototype.getFoot = function () {

​      return this.foot;

​    };



​    function Women() { this.head = 1 }

​    Women.prototype = new Person();  // 继承

​    Women.prototype.getHead = function () {

​      return this.head;

​    };



​    Women.prototype.getFoot= function (){  //重写父类的方法

​      return false;

​    }



​    var w =  new Women();

​    alert(w.getFoot());



​    alert(w instanceof Women);

​    alert(w instanceof Person);

​    alert(w instanceof Object);

组合继承

    function Person(name) {

​      this.name = name;

​    }

​    Person.prototype.show=function(){

​      alert(this.name);

​    }



​    function Women() {

​      Person.call(this,"zhangsan"); // 只能继承实例属性  能解决 引用类型共享变量问题 

​    }



​    Women.prototype=new Person();  //解决 方法继承的问题



​    var a = new Women();

​    a.show();

ECMAScript 6基础

let指令

概念：

1.let 没有变量提升的说法 所以没有预解析的说法

2.let 有局部作用域的说法和var作用不同的是 var 的作用域仅在函数中有效 let 所有{} 都有效

3.let 暂时性死区 说的就是 必须要先声明在使用 否则就会死区

4.let 不能重复声明 和java一样

const 常量

只在声明所在的块级作用域内有效

const命令声明的常量不提升

存在暂时性死区，

只能在声明的位置后面使用声明的常量，

也与let一样不可重复声明

初始化必须要赋值

不能修改

数组解构赋值

 //可嵌套

​    //  let arr = [1,[[2],3]];  -- 必须掌握

​    //  let [a,[[b],c]]=arr;

​    //  console.log(a+"-"+b+"-"+c);

​    //可忽略

​    //  let [,b,] = [1,2,3];

​    //  console.log(b);

​    //不完全解构  连空格都不留

​    //  let [a,b] = [1,2,3];

​    //  console.log(a);

​    //  console.log(b);

​    // let [a, [b], c] = [1, [2, 3], 4];

​    //剩余运算符  只解构了一部分值剩余不想解构 可以采用...

​    let [a, ...b] = [1, [2, 3], 4];

​    console.log(a); //1

​    console.log(b);//[[2,3],4]

​    // console.log(c);

​    //解构默认值

​    //   let [x,y] = ['a']; 

​    //   console.log(x);//'a'

​    //   console.log(y); // 如果没有的解构 那么就统一都是undefined

​    let [x, y = 'b'] = ['a'];

​    console.log(x); // 'a'

​    console.log(y); 'b'

对象的解构赋值

基本写法

   // 最基本的对象解构赋值

​    var obj = {

​      name: 'hello',

​      age: 18

​    };



​    console.log(obj.name + obj.age); //未解构的取值方式

​    let {

​      age,

​      name, aaa

​    } = obj;

​    console.log(name + age + aaa); //解构的取值方式  aaa没有就是undefined

多种写法

  //可嵌套

​    // let obj = {   -- 必须要掌握

​    //     p:['hello',{y:'world'}]

​    // };

​    // let {p:[x,{y}] }  = obj;

​    // console.log(x+y); //helloworld



​    //可忽略  

​    // let obj = {

​    //     p:['hello',{y:'world'},'es6']

​    // };

​    // let {p:[x,{y}] }  = obj;

​    // console.log(x+y);//helloworld



​    //不完全解构 

​    // let obj = {

​    //     p:['hello',{y:'world'}]

​    // };

​    // let {p:[x,{y},z] }  = obj;

​    // console.log(x+y+z); //hello world undefined



​    //剩余运算符

  //  let obj = {a:10,b:20,c:30,d:40};

  //  let {a,b,...rest} = obj

  //  console.log(a) // 10

  //  console.log(b)//20

  //  console.log(rest)//{c:30,d:40}



  //解构默认值

  // let obj = {a:3};

  // 原本的值优先  

  let {a=10,b=20} = {a:3};

  console.log(a);//3

  //如果 原本没有的 那么就去解构 如果解构没有默认值那就undefined 

  //如果有默认一个值 比如b=20那么就取这个默认值

  console.log(b);//20

   

  // a:aa  aa表示给a属性重写一个变量名称叫aa  避免和上面的a重复命名

  //因为let不允许重复定义同一个变量名

  let {a:aa,b:bb=5} = {a:3};

  console.log(aa);//3 

  console.log(bb);//5 

函数解构赋值

 // let arr1 = [1, 2];
        // function show(arr) {
        //     console.log(arr[0], arr[1]);
        // }
        // show(arr1);

        //函数解构赋值的基本用法  -- 必须要掌握
        // let arr1 = [1, 2];
        // function show([x, y]) {
        //     console.log(x, y);
        // }
        // show(arr1);

        //函数结构赋值 - 默认值

        // var  a = { a1: 10 };
        // function move(a) {
        //     console.log(a.a1);
        // }
        // move(a);

        // 右边的{}如果没在调用方法的时候没有传参数那么就以左边{}里面的值为准 -- 必须要掌握
        // function move({x=0,y=0}={}) {
        //     console.log(x,y);
        // }

        // move({x:3,y:10}); // 3 ，10
        // move({x:3});
        // move({});//0,0
        // move();//0,0  




        // function move({ x, y } = { x: 0, y: 0 }) { -- 必须要掌握
        //     console.log(x, y);
        // }

        // //以调用的参数为准 有参打印的就那个参数 
        // move({ x: 3, y: 10 }); //3 10
        // move({ x: 3 }); //3 undefined
        // move({}); //undefined undefined
        // move();//0,0  // 会默认调用  { x: 0, y: 0 }





        //    function show(x,y="你好"){
        //           alert(x+y);
        //    }

        //   show('哈哈 '); // 吴浩斌你好
        //   show('哈哈 ',"你好肥"); // 哈哈你好肥
        //   show('哈哈 ',"");  //空字符串 也算一个参数
        //   show('哈哈 ',);  //没有写页算一个参数
        //   show('哈哈 ',null);  //没有写页算一个参数  null 也算一个值

        // function foo({x, y = 5}) { -- 必须要掌握
        //       console.log(x, y);
        //     }
        //     foo({}) // undefined 5
        //     foo({x: 1}) // 1 5
        //     foo({x: 1, y: 2}) // 1 2
        //     foo() // TypeError: Cannot read property 'x' of undefined



        // 局限性

        //不报错
        // function show1(x,x,y){
        //     console.log("哈哈  身材好");
        // }
        // show1(1,1,2);

        // //如果 报错 你的参数中存在默认值 那么 参数列表如果存在同名 就会报错
        // function show(x,x,y=5){
        //     console.log("哈哈  身材好");
        // }
        // show(1,1,2);



        //参数默认值的位置
        // function foo(x = 1, y) {console.log(x,y);}
        // //foo(); // [1, undefined]
        // //foo(2); // [2, undefined])
        // //foo(, 1); // 报错
        // //foo(undefined, 1); // [1, 1]
        //  foo(null, 1);

        console.log((function (a, b, c = 1) { }).length);//如果有默认值的 不算长度

        console.log((function (a, b = 1, c) { }).length);//如果 默认值在中间 那后面的不算
        console.log((function (a = 1, b, c) { }).length);


        //     

        //参数默认值的位置
        function foo(x = 1, y) { console.log(x, y); }
        foo(); // [1, undefined]
        //foo(2); // [2, undefined])
        //foo(, 1); // 报错
        //foo(undefined, 1); // [1, 1]
        //foo(null, 1);
        //函数的 length 属性
        console.log((function (a) { }).length) // 1
        console.log((function (a = 5) { }).length) // 0
        console.log((function (a, b, c = 5) { }).length) // 2


        //作用域
        var x = 5;
        function f(x, y = x) { console.log(y); }
        f(10); // 10
        //rest 参数实现求和
        function add(...values) { //...会把调用函数的参数变成数组
            let sum = 0;
            for (var val of values) { sum += val; }
            console.log(sum);
        }
        add(1, 2, 3) // 6

函数结构赋值局限性

  // 局限性
   // 参数变量是默认声明的，所以不能用let或const再次声明
    //使用参数默认值时，函数不能有同名参数
        function foo(x = 5) {
            let x = 1; // error
            const x = 2; // error
        }
        foo();

    //不报错
    function show1(x,x,y){
        console.log("哈哈  身材好");
    }
    show1(1,1,2);

    //如果 报错 你的参数中存在默认值 那么 参数列表如果存在同名 就会报错
    function show(x,x,y=5){
        console.log("哈哈 身材好");
    }
    show(1,1,2);