<script> function Foo(name,age){ this.name = name; this.age = age; this.class = 'class-1'; // return this; 默认有这一行 } var f = new Foo('zhangsan',20); var f1 =new Foo('lisi',22); //建立多个对象 </script>
一、全部的引用类型(数组、对象、函数)都具备对象特性,即自由扩展特性(除了"null"之外)javascript
var obj = {}; obj.a = 100; var arr = []; arr.a = 100; function fn(){}; fn.a = 100;
二、全部的引用类型(数组、对象、函数),都有一个__proto__属性,属性值是一个普通对象html
console.log(obj.__proto__); console.log(arr.__proto__); console.log(fn.__proto__);
三、全部的函数,都有一个prototype属性,属性值也是一个普通对象。前端
console.log(fn.prototype)
prototype显示类型原型java
console.log(obj.__proto__ === Object.prototype)//true
五、当试图获得一个对象的某个属性时,若是这个对象自己没有这个属性,那么会去它的__proto__(即它的构造函数的prototype)中寻找。ajax
//构造函数 function Foo(name,age){ this.name = name; } Foo.prototype.alertName = function(){ alert(this.name); } //建立实例 var f = new Foo('zhangsan'); f.printName = function(){ console.log(this.name); } //测试 f.printName();//zhangsan f.alertName(); //zhangsan
var item; for(item in f){ //高级浏览器已经在for in 屏蔽了来自原型的属性 if(f.hasOwnProperty(item)){ console.log(item);//name printName } }
var arr=[]; arr instanceof Array; //true typeof arr; //Object,typeof是没法判断是不是数组的
//动物 function Animal() { this.eat = function(){ console.log('animal eat'); } } //狗 function Dog(){ this.bark = function(){ console.log('dog bark'); } } Dog.prototype = new Animal(); var hashiqi = new Dog();//哈士奇
返回thisjson
//构造函数 function Foo(name,age){ this.name = name; this.age = age; this.class = 'class-1'; } var f = new Foo('zhangsan',20)
function Elem(id){ this.elem = document.getElementById(id); } Elem.prototype.html = function(val){ var elem = this.elem; if(val){ elem.innerHTML = val; return this;//链式操做 }else { return elem.innerHTML; } } Elem.prototype.on = function(type,fn){ var elem = this.elem; elem.addEventListener(type,fn); return this; } var div1 = new Elem('div1'); div.html('<p>hello world').on('click',function(){ alert('clicked') }).html('<p>javascript</p>')
<script>
或者一个函数<script>
ps:注意函数声明和函数表达式的区别api
console.log(a);//undefined var a = 100;//函数声明 fn('zhangsan'); //'zhangshan' 20 function fn(name){//函数表达式 age = 20; console.log(name,age) var age; }
this要在执行时才能肯定值,定义时没法肯定数组
var a = { name: 'A', fn:function(){ console.log(this.name); } } a.fn();//this === a a.fn.call({name:'B'});//this === {name:'B'} var fn1 = a.fn; fn1(); //this === window;
(1)、做为构造函数执行浏览器
Function Foo(name){ this.name = name; } var f = new Foo('zhangsan')
(2)、做为对象属性执行性能优化
var obj = { name: 'A', printName:function(){ console.log(this.name) } } obj.printName();
(3)、做为普通函数执行
function fn(){ console.log(this) } fn();
(4)、call\apply\bind
function fn1(name,age){ alert(name); console.log(this); } fn1.call({x:100},'zhangsan',20) fn1.apply({x:100},['zhangsan',20]) var f2 = function (name,age){ alert(name); console.log(this); }.bind({y:200}); fn2('zhangsan',20)
二、只有函数和全局做用域
//无块级做用域 if(true){ var name = 'zhangsan'; } console.log(name);//zhangsan //函数和全局做用域 var a = 100; function fn(){ var a = 200; console.log('fn',a)//fn 200 } console.log('global',a)//global 100 fn();
var a = 100; function fn(){ var b = 200; //当前做用域没有定义的变量,即自由变量 console.log(a)//100 console.log(b)//200 } fn()
function F1(){ var a = 100; //返回一个函数(函数做为返回值) return function(){ console.log(a)//100自由变量父做用域寻找 } } //获得一个函数 var f1 = F1(); var a = 200; f1();
二、函数做为参数传递
function F1(){ var a = 100; return function(){ console.log(a) } } var f1 = F1(); function F2(fn){ var a = 200; fn(); } F2(f1);//100
变量提高就是,在变量的做用域内,无论变量在何处声明,都会提高到做用域的顶部,可是变量初始化的顺序不变。
function test(){ a = 1; b = 2; var a b; console.log(a) console.log(b) }
//闭包实际应用中主要封装变量,收敛权限 function isFirstLoad(){ var _list = []; return function(id){ if(_list.indexOf(id)>=0){ return false; }else { _list.push(id); return true; } } } //使用 var firstLoad = isFirstLoad(); firstLoad(0);//true firstLoad(10);//false firstLoad(20);//true //你在isFirstLoad函数外面,根本不可能修改掉_list的值
console.log(100); setTimeout(function(){ console.log(200) },1000); console.log(300); //100 300 200顺序 //对比同步 同步会有阻塞 console.log(100); alert(200);//几秒中以后单击确认 console.log(300); //100 200 300
三、事件绑定
ajax请求代码示例
console.log('start') $.get('/data.json',function(data1){ console.log(data1); } console.log('end');//start end data1
加载示例
cosnole.log('start'); var img = document.createElement('img'); img.onload = function(){ console.log('loaded') } img.src = '/xxx.png'; console.log('end');//start end loaded
事件绑定示例
cosnole.log('start'); document.getElementById('btn1').addEventListener('click',function(){ alert('clicked'); }) console.log('end'); //start end clicked
console.log(100); setTimeout(function(){ console.log(200); }) console.log(300); //100 300 200
console.log(1); setTimeout(function(){ console.log(2); },0) console.log(3); setTimeout(function(){ console.log(4) },1000) console.log(5); //1 3 5 2 4
filter 过滤符合条件的元素
forEach
var arr = [1,2,3] arr.forEach(function(item,index){ //遍历数组的全部元素 console.log(index,item) })
every
var arr = [1,2,3]; var result = arr.every(function(item,index){ //用来判断全部的数组元素,都知足一个条件 if(item<4){ return ture } }) console.log(result)//true
some
var arr = [1,2,3]; var result = arr.some(function(item,index){ //用来判断全部的数组元素,只要有一个知足条件便可 if(item<2){ return true } }) console.log(result)//true
sort
var arr = [1,4,2,3,5]; var arr2 = arr.sort(function(a,b){ //从小到大排序 return a-b //从大到小的排序 return b-a }) console.log(arr2);
map
var arr = [1,2,3,4]; var arr2 = arr.map(function(item,index){ //将元素从新组装,并返回 return '<br>'+item+'</b>' }) console.log(arr2)
filter
var arr = [1,2,3]; var arr2 = arr.filter(function(item,index){ //经过某一个条件过滤数组 if(item>=2){ return true } }) console.log(arr2);//2 3
var obj = {x:100,y:200,z:300}; var key; for(key in obj){ if(obj.hasOwnProperty(key)){ console.log(key,obj[key]) } } //x, 100;y ,200;z,300
function formatDate(dt) { if(!dt){ dt = new Date(); } var year = dt.getFullYear(); var month = dt.getMonth()+1; var date = dt.getDate(); if(month < 10){ //强制类型转换 month = '0'+month; } if(date <10){ //强制类型转换 date = '0'+date; } //强制类型转换 return year + '-'+month + '-'+date; } var dt = new Date(); var formatDate = formatDate(dt); console.log(formatDate);//2019-02-16
var random = Math.random(); random = random + '0000000000'//后面加上10个0 random = random .slice(0,10); console.log(random)
function forEach(obj,fn){ var key; if(obj instanceof Array){ //准确判断是不是数组 obj.forEach(function(item,index){ fn(index,item); }) }else { //不是数组就是对象 for(key in obj){ if(obj.hasOwnProperty(key)){ fn(key,obj[key]) } } } } var arr = ['苹果','香蕉','梨']; //注意,这里的参数的顺序换了,为了和对象的遍历格式一致 forEach(arr,function(index,item){ console.log(index,item) // 0 "苹果" // 1 "香蕉" // 2 "梨" }) var obj = {x:100,y:200}; forEach(obj,function(key,value){ console.log(key,value) // x 100 // y 200 })