js高级02之构造函数和原型，ES5中的新增方法

js高级02
一、构造函数和原型：
1.构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初值，它总与new一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面
2.new在执行时会做4件事：
1）在内存中创建一个新的空对象
2）让this指向这个新的对象
3）执行构造函数里面的代码，给这个新对象添加属性和方法
4）返回这个新对象（所以构造函数里面不需要return）

// 1. 利用 new Object() 创建对象

    var obj1 = new Object();

    // 2. 利用 对象字面量创建对象

    var obj2 = {};

    // 3. 利用构造函数创建对象
    function Star(uname, age) {
        this.uname = uname;
        this.age = age;
        this.sing = function() {
            console.log('我会唱歌');

        }
    }

    var ldh = new Star('刘德华', 18);
    var zxy = new Star('张学友', 19);
    console.log(ldh);
    ldh.sing();
    zxy.sing();

---

1）静态成员：在构造函数本身添加的成员，只能通过构造函数来访问，不能通过对象来访问
2）实例成员：构造函数内部通过this添加的成员，只能通过实例化的对象来访问，不可以通过构造函数来访问
3）构造函数的问题：浪费内存
4.构造函数原型prototype：
1）构造函数通过原型分配的函数是所有对象所共享的
2）prototype属性，指向另外一个对象。这个prototype就是一个对象，这个对象所有的属性和方法，都会被构造函数所拥有
3）我们可以把那些不变的方法直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法
5.一般情况下，我们的公共属性定义到构造函数里面，公共的方法我们放到原型对象身上
star.prototype.sing=function(){
console.log(‘我会唱歌’);
}
ldh.sing();
zxy.sing();
6.对象原型_proto_：执行构造函数的原型对象prototype
console.log(ldh.proto===star.prototype);//返回true
//方法的查找规则：首先看看ldh对象身上是否有sing方法，如果有就执行这个对象上的sing
//如果没有sing这个方法，因为有_proto_的存在，就去构造函数原型对象prototype身上去查找（_proto_非标准）
7.constructor构造函数：
1）对象原型（proto）和构造函数（prototype）原型对象里面都有一个属性constructor属性，constructor物品们成为构造函数，因为它指回构造函数本身
2）constructor主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数
3）很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数，如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数

function Star(uname, age) {
this.uname = uname;
this.age = age;
}
// 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数
// Star.prototype.sing = function() {
// console.log(‘我会唱歌’);
// };
// Star.prototype.movie = function() {
// console.log(‘我会演电影’);
// }
Star.prototype = {
// 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
constructor: Star,
sing: function() {
console.log(‘我会唱歌’);
},
movie: function() {
console.log(‘我会演电影’);
}
}
var ldh = new Star(‘刘德华’, 18);
var zxy = new Star(‘张学友’, 19);
console.log(Star.prototype);
console.log(ldh.proto);
console.log(Star.prototype.constructor);
console.log(ldh.proto.constructor);

8.构造函数、实例、原型对象的关系：
Star.prototype
----------------->
Star构造函数 Star原型对象（prototype）
\ <---------------- >
\ Star.prototype.constructor

\ ldh.proto

\ >ldh对象实例
ldh.proto.constructor
9.原型对象中this指向问题：
1）在构造函数中，里面this指向的是对象实例ldh
2）原型对象函数里面的this指向的是实例对象ldh
10.拓展内置对象：
数组和字符串内置对象不能给原型对象覆盖操作Array.prototype={},只能是Array.prototype.xxx=function(){}的方式

// 原型对象的应用 扩展内置对象方法
Array.prototype.sum = function() {
var sum = 0;
for (var i = 0; i < this.length; i++) {
sum += this[i];
}
return sum;
};
// Array.prototype = {
// sum: function() {
// var sum = 0;
// for (var i = 0; i < this.length; i++) {
// sum += this[i];
// }
// return sum;
// }
// }
var arr = [1, 2, 3];
console.log(arr.sum());
console.log(Array.prototype);
var arr1 = new Array(11, 22, 33);
console.log(arr1.sum());

11.继承call（）：
1）ES6之前并没有给我们提供extends继承，我们可以通过构造函数+原型对象模拟实现继承，被称为组合继承
2）call（）：调用这个函数并且修改函数运行时的this指向
fun.call(thisArg,arg1,arg2,…)
thisArg：this指向对象
arg1,arg2：普通参数
12.借用构造函数继承父类型方法：

// 借用父构造函数继承属性
// 1. 父构造函数
function Father(uname, age) {
// this 指向父构造函数的对象实例
this.uname = uname;
this.age = age;
}
// 2 .子构造函数
function Son(uname, age, score) {
// this 指向子构造函数的对象实例
Father.call(this, uname, age);
this.score = score;
}
var son = new Son(‘刘德华’, 18, 100);
console.log(son);

13.借用原型对象继承

// 借用父构造函数继承属性
// 1. 父构造函数
function Father(uname, age) {
// this 指向父构造函数的对象实例
this.uname = uname;
this.age = age;
}
Father.prototype.money = function() {
console.log(100000);

    };
    // 2 .子构造函数 
    function Son(uname, age, score) {
        // this 指向子构造函数的对象实例
        Father.call(this, uname, age);
        this.score = score;
    }
    // Son.prototype = Father.prototype;  这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化
    Son.prototype = new Father();
    // 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
    Son.prototype.constructor = Son;
    // 这个是子构造函数专门的方法
    Son.prototype.exam = function() {
        console.log('孩子要考试');

    }
    var son = new Son('刘德华', 18, 100);
    console.log(son);
    console.log(Father.prototype);
    console.log(Son.prototype.constructor);

---

二、ES5中的新增方法
1.数组方法：
1）forEach（）
array.forEach(function(currentValue,index,arr))
currentValue:数组当前项的值
index：数组当前项的索引
arr：数组对象本身

// forEach 迭代(遍历) 数组
var arr = [1, 2, 3];
var sum = 0;
arr.forEach(function(value, index, array) {
console.log(‘每个数组元素’ + value);
console.log(‘每个数组元素的索引号’ + index);
console.log(‘数组本身’ + array);
sum += value;
})
console.log(sum);

2）filter（）
array.filter(function(currentValue,index,arr))
a.filter()方法创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组
b.注意它直接返回一个新数组
c.currentValue：数组当前项的值
d.数组当前项的索引
e.数组对象本身

// filter 筛选数组
var arr = [12, 66, 4, 88, 3, 7];
var newArr = arr.filter(function(value, index) {
// return value >= 20;
return value % 2 === 0;
});
console.log(newArr);

3）some（）：
array.some(function(currentValue,index,arr))
a.some（）方法用于检测数组中的元素是否满足指定条件，通俗点查找数组中是否有满足条件的元素
b.注意它的返回值是布尔值，如果查找到这个元素，就返回true，如果查找不到就返回false
c.如果找到第一个满足条件的元素，则终止循环，不再继续查找
d.currentValue：数组当前项的值
e.index：数组本身的索引
f.arr：数组对象本身

// some 查找数组中是否有满足条件的元素
// var arr = [10, 30, 4];
// var flag = arr.some(function(value) {
// // return value >= 20;
// return value < 3;
// });
// console.log(flag);
var arr1 = [‘red’, ‘pink’, ‘blue’];
var flag1 = arr1.some(function(value) {
return value == ‘pink’;
});
console.log(flag1);
// 1. filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来
// 2. some 也是查找满足条件的元素是否存在 返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环

按照价格查询: - 搜索 按照商品名称查询: 查询

    </tbody>
</table>
<script>
    // 利用新增数组方法操作数据
    var data = [{
        id: 1,
        pname: '小米',
        price: 3999
    }, {
        id: 2,
        pname: 'oppo',
        price: 999
    }, {
        id: 3,
        pname: '荣耀',
        price: 1299
    }, {
        id: 4,
        pname: '华为',
        price: 1999
    }, ];
    // 1. 获取相应的元素
    var tbody = document.querySelector('tbody');
    var search_price = document.querySelector('.search-price');
    var start = document.querySelector('.start');
    var end = document.querySelector('.end');
    var product = document.querySelector('.product');
    var search_pro = document.querySelector('.search-pro');
    setDate(data);
    // 2. 把数据渲染到页面中
    function setDate(mydata) {
        // 先清空原来tbody 里面的数据
        tbody.innerHTML = '';
        mydata.forEach(function(value) {
            // console.log(value);
            var tr = document.createElement('tr');
            tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
            tbody.appendChild(tr);
        });
    }

    // 3. 根据价格查询商品
    // 当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象
    search_price.addEventListener('click', function() {
        // alert(11);
        var newDate = data.filter(function(value) {
            return value.price >= start.value && value.price <= end.value;
        });
        console.log(newDate);
        // 把筛选完之后的对象渲染到页面中
        setDate(newDate);
    });
    // 4. 根据商品名称查找商品
    // 如果查询数组中唯一的元素, 用some方法更合适,因为它找到这个元素,就不在进行循环,效率更高]
    search_pro.addEventListener('click', function() {
        var arr = [];
        data.some(function(value) {
            if (value.pname === product.value) {
                // console.log(value);
                arr.push(value);
                return true; // return 后面必须写true  
            }
        });
        // 把拿到的数据渲染到页面中
        setDate(arr);
    })
</script>

id	产品名称	价格

2.字符串方法：
1）trim（）方法会从一个字符串的两端删除空白字符
str.trim()
trim()方法并不影响原字符串本身，它返回的是新的字符串

点击

2）Object.keys（）用于获取对象自身所有的属性
Object.keys(obj)
效果类似for…in
返回一个由属性名组成的数组

// 用于获取对象自身所有的属性
var obj = {
id: 1,
pname: ‘小米’,
price: 1999,
num: 2000
};
var arr = Object.keys(obj);
console.log(arr);
arr.forEach(function(value) {
console.log(value);

    })

---

3）Object.defineProperty() 定义新属性或修改原有的属性
Object.defineProperty(obj,prop,descriptor)
a.obj:必需，目标对象
b.prop：必需，需定义或修改的属性的名字
c.descriptor ：必需，目标属性所拥有的特性
d.第三个参数以对象形式书写
value:设置属性的值，默认为undefined
writable：值是否可以重写。true|false，默认为false
enumerable：目标属性是否可以被枚举。true|false，默认为false
configurable：目标属性是否可以被删除或是否可以再次修改特性true|false，默认为false

// Object.defineProperty() 定义新属性或修改原有的属性
var obj = {
id: 1,
pname: ‘小米’,
price: 1999
};
// 1. 以前的对象添加和修改属性的方式
// obj.num = 1000;
// obj.price = 99;
// console.log(obj);
// 2. Object.defineProperty() 定义新属性或修改原有的属性
Object.defineProperty(obj, ‘num’, {
value: 1000,
enumerable: true
});
console.log(obj);
Object.defineProperty(obj, ‘price’, {
value: 9.9
});
console.log(obj);
Object.defineProperty(obj, ‘id’, {
// 如果值为false 不允许修改这个属性值 默认值也是false
writable: false,
});
obj.id = 2;
console.log(obj);
Object.defineProperty(obj, ‘address’, {
value: ‘中国山东蓝翔技校xx单元’,
// 如果只为false 不允许修改这个属性值 默认值也是false
writable: false,
// enumerable 如果值为false 则不允许遍历, 默认的值是 false
enumerable: false,
// configurable 如果为false 则不允许删除这个属性 不允许在修改第三个参数里面的特性 默认为false
configurable: false
});
console.log(obj);
console.log(Object.keys(obj));
delete obj.address;
console.log(obj);
delete obj.pname;
console.log(obj);
Object.defineProperty(obj, ‘address’, {
value: ‘中国山东蓝翔技校xx单元’,
// 如果只为false 不允许修改这个属性值 默认值也是false
writable: true,
// enumerable 如果值为false 则不允许遍历, 默认的值是 false
enumerable: true,
// configurable 如果为false 则不允许删除这个属性 默认为false
configurable: true
});
console.log(obj.address);