JS进阶day02构造函数和原型对象以及实例对象(ES5)

#对象的三种创建方式
##字面量方式,新增一个obj对象

var  obj = {
	}

##new关键字,Object()为一个函数

var  obj = new  Object()

##构造函数方法

		function person (name,age){
			  this.name = name				//this指向实例对象
		      this.age = age
		}
			var someOne = new person('小明' ，18)
			//  创建的对象为：someOne {name :'小明'，age : 18 }  

##构造函数的缺陷
占用内存，使用构造函数中的公用方法，内存都需要单独开辟一个空间存取方法

#原型对象
在每一个构造函数都有prototype属性指向原型对象，JavaScript 规定，每一个构造函数都有一个prototype 属性，指向另一个对象。直接定义在 prototype 对象上，这样所有对象的实例就可 以共享这些方法。一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上

  // 1. 构造函数的问题. 
        function Star(uname, age) {
            this.uname = uname;
            this.age = age;				//公共的属性
            // this.sing = function() {
            //     console.log('我会唱歌');		//把公用方法放入构造函数，调用时占内存
            // }
        }
        Star.prototype.sing = function() {			//原型对象添加sing方法
            console.log('我会唱歌');		//公用的方法设置到原型对象，来节约内存
        }
        var ldh = new Star('刘德华', 18);		
        var zxy = new Star('张学友', 19);
        //定义到构造函数中的方法，我们直接加上方法名直接调用即可
        ldh.sing();			//我会唱歌，调用构造函数里面的原型对象sing()
        zxy.sing();			//我会唱歌，调用同样的构造函数里面的原型对象sing()

#构造函数，原型对象以及实例对象之间的相互调用以及关系，下图原型链图

##构造函数和原型函数的this指向以及改变this指向
构造函数和原型函数的this都指向调用者（实例化对象），call()可以修改this的指向,使用call()的时候 参数一是修改后的this指向,参数2,参数3… 使用逗号隔开连接

function fn(x, y) { 
	console.log(this); 		//指向hero对象
	console.log(x + y);	//3
 } 
 var 	hero = { name: 'andy' };
 fn.call(hero, 1, 2);//调用了函数此时的this指向了对象hero,

#ES5中的继承（继承属性和方法）

1. 先定义一个父构造函数
2. 再定义一个子构造函数
3. 子构造函数继承父构造函数的属性(使用call方法)

// 1. 父构造函数 function Father(uname, age) { 
		// this 指向父构造函数的对象实例 
		this.uname = uname;
		 this.age = age;
 }// 2 .子构造函数 
 function Son(uname, age, score) {
  // this 指向子构造函数的对象实例star 
  //使用call方式实现子继承父的属性 uname，age
  Father.call(this, uname, age); 
  this.score = score; 
  }
  var star = new Son('刘德华', 18, 100);
  //输出对象为star {name : '刘德华'，age:'18',score:'20'}

#ES5新增的遍历数组方法
##forEach 相当于for循环，循环次数为数组长度

arr.forEach(function(value, index, array) { 
//参数一是:数组元素
//参数二是:数组元素的索引
//参数三是:当前的数组 
})
  //相当于数组遍历的 for循环 没有返回值

// forEach 迭代(遍历) 数组
        var arr = [1, 2, 3];
        var sum = 0;
        arr.forEach(function(value, index, array) {	//循环次数为数组长度
            console.log('每个数组元素' + value);	
            //1，2，3   列出3个元素
            console.log('每个数组元素的索引号' + index);
            //0，1，2	列出3个索引号
            console.log('数组本身' + array); 
            //数组本身[1,2,3]会列出3次
            sum += value;
        })
        console.log(sum);

##数组方法filter用于过滤数组

var arr = [12, 66, 4, 88, 3, 7]; 
var newArr = arr.filter(function(value, index,array) { 
   //参数一是:数组元素
   //参数二是:数组元素的索引
   //参数三是:当前的数组
   return value >= 20;		//返回满足条件的元素组成的数组
 }); 
 console.log(newArr);//[66,88] 
 //返回值是一个新数组

##数组方法some
some 查找数组中是否有满足条件的元素

    var arr1 = ['red', 'pink', 'blue'];
        var flag1 = arr1.some(function(value) {
            return value == 'pink';		
            //查询数组中有没有pink元素，有就true
        });
        console.log(flag1);  //true

#去除字符串两端的空格
一般用于表单的信息读取，可以删除字符串两端的空格

	var str = '   hello    ' 
	console.log(str.trim()） //hello 去除两端空格

#Object.keys遍历对象属性
Object.keys(对象) 获取到当前对象中的属性名 ，返回值是一个数组

  var obj = {
           id: 1,
           pname: '小米',
           price: 1999,
           num: 2000
       };
       var arr = Object.keys(obj);
       console.log(arr);	//返回值为 arr = ['id','pname','price','num']