构造函数和原型
- new在执行时会做四件事:
- 在内存创新的空对象;
- 让this指向这个新的对象;
- 执行构造函数里的代码,给新对象添加属性和方法;
- 返回新对象
- 成员
- 实例成员:在构造函数内部创建的对象成员称为实例成员,(this)由实例化对象来访问
- 静态成员:在构造函数本身上添加(Star.sex)的成员,只能由构造函数本身访问
<script> // 构造函数中的属性和方法我们称为成员, 成员可以添加 function Star(uname, age) { this.uname = uname; this.age = age; this.sing = function() { console.log('我会唱歌'); } } var ldh = new Star('刘德华', 18); // 1.实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员 // 实例成员只能通过实例化的对象来访问 console.log(ldh.uname); ldh.sing(); // console.log(Star.uname); // 不可以通过构造函数来访问实例成员 // 2. 静态成员 在构造函数本身上添加的成员 sex 就是静态成员 Star.sex = '男'; // 静态成员只能通过构造函数来访问 console.log(Star.sex); console.log(ldh.sex); // 不能通过对象来访问 </script>
- 原型prototype:一个对象;写在构造函数外;Star.prototype
- 作用:可以共享的方法;
- 一般情况下,我们的公共属性定义到构造函数里,公共的方法放到原型对象上
- 对象原型:
- 对象原型__proto__,对象都会有一个属性__proto__指向构造函数的prototype原型对象,(ldh)对象可以使用构造函数prototype原型对象(里面的this指向实例对象)的属性和方法
- 构造函数:constructor
- 对象原型(proto)和构造函数原型对象(prototype)里面都有一个属性constructor属性
- 利用constructor这个属性指回原来的构造函数(修改了原型对象prototype,即给原型对象赋值的是一个对象,必须手动的利用constructor指回原来的构造函数)
- 构造函数、实例、原型对象三者之间的关系
<script> function Star(uname, age){ this.uname = uname; this.age = age; } Star.prototype={ //必须利用constructor指向原来的构造函数 constructor:Star, sing:function(){ console.log('我会唱歌'); }, dance:function(){ console.log('我会跳舞'); } } var ldh = new Star('刘德华', 18); var zxy = new Star('张学友', 18); // console.log(ldh); Star {uname: "刘德华", age: 18} //如果被覆盖了(17行没有constructor:Star)就输出不了constructor console.log(Star.prototype); // 指向Star原型对象 console.log(ldh.__proto__); // 指向Star原型对象 // console.log(Star.prototype.constructor); // Star构造函数 // console.log(ldh.__proto__.constructor); // Star构造函数 </script>
- 原型链
- JavaScript的成员查找机制(规则)
- 当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性
- 如果没有就查找它的原型(也就是proto指向的prototype原型对象)
- 如果没有就查找原型对象的原型(Object的原型对象)
- 以此类推一直找到Object为止(null)
- 扩展内置对象方法
<script> //原型对象的应用 扩展内置对象 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] var arr1 = new Array(11, 22, 33); console.log(Array.prototype); console.log(arr1.sum()); console.log(arr.sum()); </script>
继承
- 说明:ES6之前没有extends继承,可以通过构造函数+原型对象模拟实现继承称为组合继承
- call():可调用这个函数,并且修改函数运行时的this指向
- 借用父构造函数继承属性
fn.call(thisArg(this指向的对象),arg1,arg2...传参) function.fn(x, y){} var o = {name = 'andy'}; fn.call(o,1,2) <script> function Father(uname, age){ this.uname = uname; this.age = age; } function Son(uname, age, score){ //this指向子构造函数的实例对象,继承父属性 Father.call(this, uname, age) this.score = score; } var son = new Son('刘德华', 18, 100); console.log(son); </script>
- 借用原型对象继承
<script> function Father(uname, age){ this.uname = uname; this.age = age; } Father.prototype.money = function(){ console.log(1000000); } function Son(uname, age, score){ //this指向子构造函数的实例对象 Father.call(this, uname, age) this.score = score; } // Son.prototype = Father.prototype; 这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会一起改变 //利用原型链将Son的原型对象指向Father的实例对象,实例对象再查找Father.prototype原型对象 Son.prototype = new Father(); //利用对象形式修改了原型对象,别忘了利用constructor重新指回原来的原构造函数 Son.prototype.constructor = Son; var son = new Son('刘德华', 18, 100); console.log(son); console.log(Father.prototype); console.log(Son.prototype.constructor);//指回Son函数 </script> 打印 Son age: 18 score: 100 uname: "刘德华" __proto__: Father Object money: ƒ () constructor: ƒ Father(uname, age) __proto__: Object ƒ Son(uname, age, score){ //this指向子构造函数的实例对象 Father.call(this, uname, age) this.score = score; }
- 借用父构造函数继承属性
ES5新增的方法
- forEach:迭代(遍历)数组
arr.forEach(function(currentvalue当前的值, index, array){})
- filter()方法创建一个新的数组,符合条件的所有元素,主要用于筛选数组,返回一个新的数组,返回一个新的数组
var newArr = arr.filter(function(value, index, array){ return value >= 20; })
- some()方法用于检测是否有满足条件的,返回布尔值true, false;如果找到第一个满足条件的元素,则终止循环,不在查找
var flag = arr.some(function(value, index, array){ return value >= 20; }); console.log(flag)
- 字符串方法
- trim()方法去除字符串两侧空格,返回新的字符串
- 对象方法:
- Objcet.keys(obj):用于获取对象自身所有的属性,返回属性名组成的数组,效果类似for…in…
- Object.defineProperty(obj目标对象, prop修改的属性名, {}):定义新属性或修改原有属性
{}里面的参数: value:修改或加属性值 writable:false,不允许修改属性值 enumerable:false,能否被遍历,默认false不能 configurable:false,不允许删除或是否能再次修改特性