js高距離読書ノート

32794 ワード
javascript
3.4
  • は、基本タイプの値に属性を追加することはできませんが、
    • var a=new String('ddd')
a.name='lee'
console.log(a.name)//'lee'
  • 基本型値を一つの変数から他の変数にコピーすると、二つの変数のいずれかの動作は相互に影響しません.一方の変数から他の変数に参照タイプ値をコピーすると、一つの変数が変化し、他の変数解決方法に影響を与えます.
    var clone = function(myObj){
    if(typeof(myObj) != 'object') return myObj;
    if(myObj == null) return myObj;
    var myNewObj = new Object(); 
    for(var i in myObj){
        myNewObj[i] = clone(myObj[i]);
    }  
    return myNewObj;
};
//     
function clone(Obj) {
    var buf;   
    if (Obj instanceof Array) {

        buf=Array.prototype.slice.call(Obj)
        return buf;
    } else if (Obj instanceof Object){
        buf = {};  //        
        for (var k in Obj) {  //            
            buf[k] = clone(Obj[k]);
        }
        return buf;
    }else{
        return Obj;
    }
}
//  ：
Array.prototype.clone=function(){  
   return this.slice(0);  
}
  • は、オブジェクトが空かどうか判断する
    • .
    var isEmptyObj=function(obj){
    for(var name in obj){
        return false
    }
    return true
};//
  • 伝達パラメータは値によってしか伝達できません.このオブジェクトが値によって伝達されても、参照によって同じオブジェクト
    • にアクセスします.
    function setName(obj){
    obj.name='nicholas'
    obj=new Object()//          ，             
    obj.name='greg'
}
var person=new Object()
setName()
alert(person.name)//'nicholas'
  • 実行環境及びスコープの先端は、常に現在実行されているコード所在環境の変数オブジェクトである.この環境が関数である場合、そのアクティブオブジェクトを変数オブジェクトとします.識別子解析は、スコープのレベル1に沿って識別子を検索するプロセスである.
  • ドメインチェーンtry-catch文を拡張するcatchブロックwith文
  • ブロックレベル機能領域がない
  • ごみ収集
  • タグクリア
  • 参照カウント
  • objectタイプ
    • var person={
        'name':'lelele'
    }
    var proname='name'
    console.log(person[proname])//   person.proname
  • Arayタイプ
    • var colors=new Array()
var colors=[]
var colors=Array()//     ，
    検出配列:
    typeof []; // "object" 
[] instanceof Array; // true 
typeof [] == "object" && [].constructor == Array; 
Object.prototype.toString.call(arr) === "[object Array]"; 
        
var colors=[1,2,3]
colors.toString()//'1,2,3'
colors.valueOf()//'1,2,3'
colors//'1,2,3'
    ：
var color=['red','blue']
var count=color.push('yellow')//2    
var item=color.pop()//‘yellow’     
   unshift shift

  ：
var values=[0,1,5,10,15]
values.reverse()//5,4,3,2,1        
values.sort()//0,1,10,15,5
function compare(){
    if(value1return -1
    }else if(value1>value2){
        return 1
    }else{
        return 0
    }    
}
values.sort(compare)

        ：
concat
splice
slice
indexOf()   ===
    var person={name:'nicholas'}
    var people=[{name:'nicholas'}]
    people.indexOf(person)//-1
every    true，   true
filter  true      
forEach        ，     
map()        ，           
some()         true    true
reduce(function(prev,cur,index,array){}[,   ])
reduceRight
  • Dateタイプ
    • var dat=new Date(this.date);
dat.setDate(1);

dat.setDate(dat.getDate()-dat.getDay());
for(var i=0;i<42;i++){
   var single=$('span').eq(i+7);
   single.html(dat.getDate());
   if(dat.getMonth()!==this.date.getMonth()){
       single.css({color:'lightgray'});
   }else if(dat.getDate()===this.date.getDate()){
       this.currentDate=single;//      
       single.css({color:'#fff',background:'#c81b01'});
   }else if(dat.getDay()===0||dat.getDay()===6){
       single.css({color:'#c81b01'});
   }else{
       single.css({color:'black'});
   }
   dat.setDate(dat.getDate()+1);
}
  • Functionタイプ
    •  function sum(num1,num2){
        return num1+num2
    }
 alert(sum(10,10))//20
 var anotherSum=sum
 alert(anotherSum(10,10))//20
 sum=null
 alert(anotherSum(10,10))//20

    function outer(){
    inner()
}
function inner(){
    alert(arguments.callee.caller)//            
}
outer()
Array.prototype.slice.call(arguments)//
    call、appy、bindの違い
  • 基本包装タイプ文字列:
    • 
var s1='some text'
var s2=s1.substring(2)
alert(s1)//   
var obj=new Object('some text')
alert(obj instanceof String)//true
var value='25'
var number=Number(value)
alert(typeof number)
var obj=new Number(value)
alert(typeof obj)
alert(obj instanceof Number)//true
  • Booleanタイプ
    •  var falseObject=new Boolean(false)//    
 var result=falseObject&&true
 alert(result)//true
 var falseValue=false;
result =falseValue&&true
alert(result//false)
  • Numberタイプ
    • var num=10
num.toString(16)//'a'
var num=10.005
num.toFixed(2)//10.01
var num=10.004
num.toFixed(2)//10.00
var num=10
num.toExponential(1)//1.0e+1
var num=100
num.toPrecision(1)//1e+2
num.toPrecision(2)//99
num.toPrecision(3)//99.0
var numberObject=new Number(10)
var numberValue=10
alert(typeof numberObject)//'object'
alert(typeof numberValue)//'number'
alert(numberObject instanceof Number)//true
alert(numberValue instanceof Number)//false
  • String 
    • concat('','')
slice()
substring()//       0
substr(m,n(     ))
trim（）
function trim(str){ //         
    return str.replace(/(^\s*)|(\s*$)/g, "");
}
function ltrim(str){ //       
    return str.replace(/(^\s*)/g,"");
}
function rtrim(str){ //       
    return str.replace(/(\s*$)/g,"");
}
    eval()eval(‘function sayHi(){alert(‘hi’)})は変数が存在しません.厳格なモードでは、外部はeval()が作成した変数や関数にアクセスできません.
  • Math方法
    •  Math.max(3,5,32,65)
 Math.min()
 Math.ceil()
 Math.round()
 Math.floor()
 Math.random()//[0,1)
 return Math.random()<.5?1:-1;
  • 理解対象
    • var person={}
Object.defineProperty(person,'some',{
    writable:false,
    value:'nick'
})
    var person={
        name:'ddd'
    }
  Object.defineProperty(person,'sex',{
    get:function(){
        return this.name
    },
    set:function(val){
        this.name=val
    }
  })
    オブジェクトを作成
  • 工場モデル
    •  function createPerson(name,age,job){
        var o=new Object()
        o.name=name
        o.age=age
        o.job=job
        o.sayName=function(){
            alert(this.name)
        }
        return o
    }
    var person1=createPerson('nik',29,'doctor')
    person1.sayName()
  • コンストラクションモード
    • function Person(name,age,job){
    this.name=name
    this.age=age
    this.job=job
    this.sayName=function(){
        alert(this.name)
    }

}
var person1=new Person('nik',29,'doctor')
    person1.sayName()
  • プロトタイプモデル
    • function Person(){

}
Person.prototype.name='le'
Person.prototype.sayName=function(){
    alert(this.name)
}
var person=new Person()
person.sayName()

hasOwnProperty()         
function hasPrototypeProperty(object,name){
    return (!object.hasOwnProperty(name))&&(name in object)
}
//  in
function Person(){

   }
   Person.prototype.name='nick'
   Person.prototype.age=30
   Person.prototype.job='doctor'
   var keys=Object.keys(Person.prototype)
   console.log(keys)//['name','age','job']
   var p=new Person()
   var m=Object.keys(p)
   console.log(m)//[]
   p.name='yy'
   p.age=29
   var n=Object.keys(p)
   console.log(n)//['name','age']
   for(var i in p){
    console.log(i)//name age job
   }
    function Person(){

}
var friend=new Person()//      ，        
Person.prototype={
    constructor:Person,
    sayName:function(){
        alert('ddd')
    }
}
friend.sayName()
  • 組み合わせは、構造関数とプロトタイプモード
    • を使用する.
    function Person(name,age,job){
    this.name=name;
    this.age=age
    this.job=job

}
Person.prototype={
    constructor:Person,
    sayName:function(){
        alert(this.name)
    }
}
var person=new Person('ddd',55,'doctor')
  • ダイナミックプロトタイプ
    • function Person(name,age,job){
    this.name=name
    this.age=age
    this.job=job
    if(typeof this.sayName!='function'){
        Person.prototype.sayName=function(){
            alert(this.name)
        }
    }
}
var person=new Person('dd',55,'dd')
person.sayName()
  • 寄生構造関数モード
    • function Person(name,age,job){
    var o=new Object()
    o.name=name;
    o.age=age
    o.job=job
    o.sayName=function(){
        alert(this.name)
    }
    return o
}
var friend = new Person('nick',55,'engineer')
friend.sayName()
  • コンストラクタモード
    • function person(name,age,job){
    var o new Object
    o.sayName=function(){
        alert(name)
    }
    return o
}
var friend=Person('nock',29,'ddd')
friend.sayName()
    継承:
  • プロトタイプチェーン
    • function SuperType(){
    this.property=true
}
SuperType.prototype.getSuperValue=function(){
    return this.property
}
function SubType(){
    this.subproperty=false
}
SubType.prototype=new SuperType()
SubType.prototype.getSubValue=function(){
    return this.subproperty
}
var instance=new SubType()
alert(instance.getSuperValue())
alert(Object.prototype.isPrototypeOf(instance))//true
alert(SubType.prototype.isPrototypeOf(instance))//true
alert(SuperType.prototype.isPrototypeOf(instance))//true
  • 構築関数を借りる
    • function SuperType(){
    this.colors=['red','blue','green']

}
function SubType(){
    SuperType.call(this)//  
}
var instance=new SubType()
var instance2=new SubType()
instance.colors.push('black')
console.log(instance2.colors)//['red','blue','green']
  • グループの後継者は2回のスーパークラス
    • を呼び出します.
    function SuperType(name){
    this.colors=['red','blue','green']
    this.name=name

}
SuperType.prototype.sayName=function(){
    alert(this.name)
}
function SubType(name,age){
    SuperType.call(this,name)//  
    this.age=age
}
SubType.prototype=new SuperType()
SubType.prototype.constructor=SubType
  • プロトタイプは
    • を継承します.
    function object(o){
    function F(){}
    F.prototype=o
    return new F()
}
//    ,   Object.create()
  • 寄生式引継ぎ
    • function createAnother(original){
    var clone=object(original)
    clone.sayHi=function(){
        alert('hi')
    }
    return clone
}
  • 寄生結合式継承
    • function inheritProperty(subType,superType){
    var prototype=object(superType.prototype)
    prototype.constructor=subType
    subType.prototype=prototype
}
function SuperType(name){
    this.name=name
    this.colors=['red','blue','green']
}
SuperType.prototype.sayName=function(){
    alert(this.name)

}
function SubType(name,age){
    SuperType.call(this,name)
    this.age=age
}
inheritProperty(SubType,SuperType)
SubType.prototype.sayAge=function(){
    alert(this.age)
}
var per=new SubType('lll',29)
per.sayName()
    webpack学習(四)—code spliting