自己的筆記01

最新推荐文章于 2024-05-18 20:57:08 发布

qq_14846625

最新推荐文章于 2024-05-18 20:57:08 发布

阅读量319

点赞数

分类专栏：前端笔记

本文链接：https://blog.csdn.net/qq_14846625/article/details/96905920

版权

前端笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

數據類型(變量)

數字，字符串布爾值
變量的聲明 var 變量名
可以聲明的同時賦值 var 變量名=值（省略var的變量是全局變量）
也可以先聲明后賦值
變量聲明了但沒有賦值會返回 undefined
對象的屬性沒有賦值也會返回undefined

對象的創建操作等方式

創建對象

	var person ={
	   	gender: '男',
   	height: 185,
   	toShanhai: function(){
   		console.log('dodododood')
   	}
	};

獲取對象屬性
同過點方式 .xxx
通過對象[‘屬性名’]

   console.log(person.gender);
   console.log(person['height'])

設置屬性
直接獲取到的屬性直接賦值

  person.gender='manel';
  person['height'] = 11;

刪除屬性
delete 對象屬性只能刪除對象中的屬性不能刪除變量
清空對象

  delete preson.gender
  person ={} //清空對象
  person = null; //把person變量賦值為null 此後person不是對象

構造函數

如果有一系列的對象都有相同的方法屬性可以通過構造方法來統一創建

  function Preson(age,gender){
  	this.age = age;
  	this.gender = gender;
  }
  var p1 = new Person(5,'lusi');

構造函數的返回值
如果返回的是數字、字符串、布爾值、null、undefined 會返回構造函數實例
如果複雜類型會返回複雜類型
判斷一個對象是否某個函數的實例
typeof 只能判斷數字、字符串、布爾值、null、undefined 不能判斷對象
可以觀察 xxx.proto 屬性中的constructor屬性通常這個值就是xxx的構造函數

 	function fn(){
 		return [1,115,55];
 	}
 	var q = new fn(); //返回的是數組的類型 不是函數的實例
 	console.log(q instanceof fn); //false

構造函數的prototype 原型對象

通過構造函數是可以方便地構造自己想要的代碼但是如果構造函數的方法功能都差不多構造多了會造成内存的浪費比如以下代碼

  function Person(name,age){
  	this.name = name;
  	this.age = age;
  	this.say = function(){
  		console.log('hello')
  	}
  }
  var p1 = new Person();
  var p2 = new Person();
  console.log(p1.say===p2.say);//p1對象的say方法和p2對象say方法不是同一個方法會造成内存浪費

把功能相似的方法寫到原型中就是同一個方法


 Person.prototype.run=function(){
 	console.log('hello');

 }
 console.log(p1.run===p2.run)//p1 p2 對象的 run方法是同一個方法

給原型對象添加方法的時候會讓代碼產生不少的冗餘如

Person.prototype.s1 = function(){}
Person.prototype.s2 = function(){}

改良方法

  Person.prototype = {
  	 a1: function(){

  	 },
  	 a2: function(){

  	 }
   }

這方法有個弊端會破壞原有的原型鏈一般用於自定義的構造函數用這種方法時必須先改變原型后創建對象不然對象會按照之前的原型造成訪問不了新的原型

拷貝繼承

創建一個對象複製一個存在的對象

  var o3 = {gender:'男'，grade:'初三'};
  var o4 = {};
  for(var key in o3){
 	 o4[key] = o3[key];
  }
  //封裝成函數
  function extend(source,target){
 	 for(var key in source){
 		 target[key] = source[key];
 	 }
  }
  o5={};
  extend(o3,o5);

構造函數的時候調用另一個構造函數

   function Animal(name,age,gender){
   	this.name = name;
   	this.age = age;
   	this.gender = gender;
   }

   function Person(name.age,gender,say){
   	Animal.apply(this,[name,age,gender]); //等價於 Animal.call(this,[name,age,gender])
   	this.say =say;
   }
   var p1  = new Person('tom',15,'man',function(){
   	console.log('hello world')
   })

作用域

fn函數執行過程首先找到函數内部的所有變量、函數聲明把他們放在作用域中給變量一個初始值 undefined 讓後逐條執行代碼有賦值語句就對變量進行變量賦值
分析變量的作用域查找當前作用域是否有沒有往上一級找

   function fn(){
   	var age;
   	console.log(age); //undeinfed
   	age=18;
   	console.log(age);//18
   }

閉包

認識閉包
函數執行完畢會把變量釋放但是由於下面返回的匿名函數使用了a變量造成a變量不能得到釋放，而是把a變量存放到匿名函數可以訪問的地方去

  function fn(){
  	var a = 4;
  	return function(){
  		a++;
  		console.log(a);
  	}
  }
  var f1 = fn(); //指向匿名函數
  f1();  //5
  f1();  //6
  f1();  //7
  var f2 = fn(); 
  f2(); //5
  f2(); //6
  f2(); //7

閉包的應用模塊化思想

  	var ktv = (function Ktv(){
  		//保護這些變量
  		var leastPrice =1000; // 最低消費金額
  		var total = 0; //消費合計金額
  		return {
  			buy: function(price){
  				total=+price;
  			},
  			pay:  function(){
  				if(total<leastPrice){
  					console.log('最低消費未達到，請繼續購物');
  				}else{
  					console.log('歡迎下次光臨');
  				}
  			},
  			editLeast: function(id,price){
  				if(id=888){
  					leastPrice = price;
  					console.log('現在最低消費是'+price);
  				}else{
  					console.log('你沒有權限去修改');
  				}
  			}
  		}
  	})()

閉包的内存釋放

  function f1(){
  	var a= 5;
  	return function(){
  		a++;
  		console.log(a);
  	}
  }
  var q1=f1();
  //如果想釋放q1保存的a 只能把q1賦值為Null
  q1=null;

關於this的指向

  //方法調用
  var age = 18;
  var p ={
  	age:15,
  	say:function(){
  		console.log(this.age);
  	}
  }
  var f1 =  p.say;
  f1(); //函數調用 内部this 指向windows 所以age為18
  p.say(); //方法調用 内部this 指向對象

  function fn(name){
  	this.name  = name;
  }
  var n = new fn('xiaoming'); //構造函數 this 指向實例本身


  function jQuery(){
      var _init=jQuery.prototype.init;
      //_init就是一个构造函数
      return new _init();
  }
  jQuery.prototype={
      constructor:jQuery,
      length:100,
      init:function(){
          //this可以访问到实例本身的属性，也可以访问到init.prototype中的属性
          //这里的init.prototype并不是jQuery.prototype
          console.log(this.length);   
          //正确答案：undefined
          //100? 错误的
      }
  }
              //this指向init构造函数的实例
          //-->1、首先查看本身有没有length属性
          //-->2、如果本身没有该属性，那么去它的原型对象中查找
          //-->3、如果原型对象中没有，那么就去原型对象的原型对象中查找，最终一直找到根对象（Object.prototype）
          //-->4、最终都没有找到的话，我们认为该对象并没有该属性，如果获取该属性的值：undefined

上下文調用方式有3種 call apply bind

//上下文调用方式，有3种，call、apply、bind
  function f1(){
      console.log(this);
  }
  //call方法的第一个参数决定了函数内部的this的值
  f1.call([1,3,5])
  f1.call({age:20,height:1000})
  f1.call(1)      
  f1.call("abc")
  f1.call(true);
  f1.call(null)
  f1.call(undefined);

  //上述代码可以用apply完全替换

  //总结：
  //call方法的第一个参数：
  //1、如果是一个对象类型，那么函数内部的this指向该对象
  //2、如果是undefined、null，那么函数内部的this指向window
  //3、如果是数字-->this：对应的Number构造函数的实例
  //      -->   1   --> new Number(1)
  //  如果是字符串-->this：String构造函数的实例
  //      --> "abc"   --> new String("abc")
  //  如果是布尔值-->this：Boolean构造函数的实例
  //      --> false   --> new Boolean(false)

call apply 的異同

    //call和apply都可以改变函数内部的this的值
  //不同的地方：传参的形式不同

  function toString(a,b,c){
      console.log(a+" "+b+" "+c);
  }
  toString.call(null,1,3,5)   //"1 3 5"
  toString.apply(null,[1,3,5])//"1 3 5"

bind 改變this 指向
执行了bind方法之后，产生了一个新函数，这个新函数里面的逻辑和原来还是一样的，唯一的不同是this指向

  var obj={
      name:"西瓜",
      drink:(function(){
          //this指向了：{ name:"橙汁" }
          console.log(this.name);
      }).bind({ name:"橙汁" })
  }
  obj.drink();

模板字符串

   //模板字符串就是一种字符串的新的表现形式

    //a、基本用法
    var s1 = ` hello `
    var s2 = ' hello '

    //b、模板字符串解决了一些痛点
    //+字符串和变量拼接
    var s3 =" a " + s1 + " b " + s2;
    var s4 = ` a ${s1} b ${s2}`;        //减少了错误几率

    //+字符串换行
    var s5 =`<div>
                <p>
                    <span>123</span>
                </p>
                <p>${s2}</p>
                <p>${s3}</p>
                <p>${s1}</p>
            </div>`;
    console.log(s5);

es6語法

解構賦值
如果知道傳入的對象屬性可以用結構賦值

   function a({width,height}){
	   //let {width,height} = option
	   console.log(width);
	   console.log(height);
   }
   s={width:55,height:555};
   a(s);

rest參數

    function fn(){
        //arguments是函数内部的一个局部变量，
        //arguments.length表示函数的实参的个数
        console.log(arguments.length);

        for(var i =0 ; i<arguments.length; i++){
            console.log(arguments[i]);
        }

    }
    fn(1,3,5)       //3
    // fn("a","b","c","d","e") //5

    //es6箭头函数内部不能使用arguments
    //为了弥补这个问题，rest参数应孕而生

    //...args就是rest参数
    //-->产生了一个变量，这个变量是一个数组，数组里面包含了这个函数调用时传递的所有实参
    function q(...args){
        //验证args是不是数组？
        console.log(args instanceof Array);//true
        console.log(Object.prototype.toString.call(args));//"[object Array]"
        console.log(Array.isArray(args));   //true es5中的新方法

        console.log(args);
    }
    q(1,3,5);
    q(2,3,4,5,6,7,8);

箭頭函數

   //无参的匿名函数
    div.onclick=function(){

    }
    //相当于：
    div.onclick=()=>{

    }

    //有一个参数的匿名函数
    // var fn=function(name){
    //     console.log(name);
    // }
    //等价于：
    var fn=name=>{
        console.log(name);
    }
    //也等价于：
    // var fn=(name)=>{
    //     console.log(name);
    // }


    //有2个或以上的参数的匿名函数
    // var q=function(name,age){

    // }
    //等价于
    var q=(name,age)=>{
        //切记：()不能省略
    }



    //有了匿名函数之后，我们的代码清晰了很多：
    var students=[1,3,5];
    students.forEach(function(value,index){
        
    })
    students.forEach((value,index)=>{

    })
    //只需要一个参数
    students.forEach(value=>{
        
    })

箭頭函數的特點

    var p={
        age:18,
        //es6中对象方法的箭头函数表示形式
        run:()=>{
            setTimeout(()=>{
                //this:window
                console.log(this);//this是window
            },100)
        },
        travel:function(){
            //this:p
            setTimeout(()=>{
                console.log(this);//this是p
            },100)
        },
        //推荐使用的方式☆☆☆：es6中对象方法的简写形式
        say(){
            console.log("say方法中的this：",this);
            setTimeout(()=>{
                console.log("say内部的延迟函数：",this);//this是p
            },100)
        },
    }

    p.run();

    p.travel();

    p.say();

對象的淺拷貝 Object.assign()

  var source ={
      age:18,
      height:170,
      className:'1年二班'
  }
  // 對對象的淺拷貝
  var newObj = Object.assign({},source);
  console.log(newObj);
  var newObj2={};
  Object.assign(newObj2,source);
  console.log(newObj2);

對象擴展運算符

  var car ={brand:'BMW',price:360000};
  //對象的淺拷貝
  var car2 ={ ...car };
  //拷貝的同時 還可以修改某個值
  var car3 = { ...car,price:222};
  //拷貝的同時可以擴展一些屬性
  var car4 = { ...car,type:'suv'};
  //數組也可以拷貝 
  var s1=[1,3,5];
  var s2 =[ ...s1];

Promise

把異步操作封裝在一個Promise對象中

     function fn(){
         return new Promise(resolve=>{
             setTimeout(()=>{
                 console.log('你好');
                 //告訴外界 到這裏異步已經執行完畢
                 resolve();
             },1000);
         })
     }
      //等待 異步執行完畢后執行一下代碼 res參數是異步操作的函數返回值
     fn().then(res=>{
         //執行下一步
         console.log('下一步');
         fn().then(res=>{
             console.log('執行第二步');
         })
     })
     //執行順序 你好->下一步->你好->執行第二步

解決回調地獄書寫更清晰

    function fn(){
 	 return new Promise(resolve=>{
 		 setTimeout(() => {
 			 console.log('第一步');
 			 resolve();
 		 }, 1000);
 	 });
  }

  function fn2(){
 	 return  new Promise(resolve=>{
 		 setTimeout(() => {
 			 console.log('第二步');
 			 resolve();
 		 }, 1000);
 	 });
  }
  //fn fn2 函數相互調用
  fn().then(res=>{
 	 return fn2();
  }).then(res=>{
 	 return fn();
  }).then(res=>{
 	 return fn2();
  }).then(res=>{
 	 setTimeout(() => {
 		 console.log('完成');
 	 }, 1000);
  });
  //執行順序  第一步->第二步->第一步->第二步->完成

處理異步錯誤時的操作

   var b = false;
  function fn(){
      //resolve 成功   reject失敗
 	 return new Promise((resolve,reject)=>{
 		 setTimeout(() => {
 			 if(b){
 				 var s= 1;
 				 console.log('執行成功');
 				 resolve(s);
 			 }else{
 				 var s=2;
 				 console.log('執行失敗');
 				 reject(s);
 			 }
 		 }, 1000);
 	 });
  }
  
  fn().then(res=>{
      console.log(`s的值是${res}`);
      //處理錯誤的時候用catch
  }).catch(reserr=>{
     console.log(`s的值${reserr}`);
  })	

  //執行結果 執行失敗 ->s的值是 2