绵阳网站关键词,网站设计论文,wordpress泛解析,邢台建设专业网站原型链
作用#xff1a;提供一个成员的查找机制#xff0c;或者查找规则含义#xff1a;由原型所串联起来的链装结构JavaScript 的成员查找机制(规则)
当访问一个对象的属性#xff08;包括方法#xff09;时#xff0c;首先查找这个对象自身有没有该属性。如果没有就查…原型链
作用提供一个成员的查找机制或者查找规则含义由原型所串联起来的链装结构JavaScript 的成员查找机制(规则)
当访问一个对象的属性包括方法时首先查找这个对象自身有没有该属性。如果没有就查找它的原型也就是__proto__指向的prototype 原型对象。如果还没有就查找原型对象的原型Object的原型对象。依此类推一直找到Object 为止null。__proto__对象原型的意义就在于为对象成员查找机制提供一个方向或者说一条路线。// console.log(Star.prototype.__proto__.__proto__);
// console.log(Object.prototype);扩展内置对象
可以通过原型对象对原来的内置对象进行扩展自定义的方法。比如给数组增加自定义求偶数和的功能。console.log( Array.prototype );// 添加求和方法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() );var newArr [6,7,8,9];console.log( newArr.sum() );继承
ES6之前并没有给我们提供extends继承。我们可以通过构造函数原型对象模拟实现继承被称为组合继承。call()调用这个函数, 并且修改函数运行时的this 指向fun.call(thisArg, arg1, arg2, ...);call把父类的this指向子类thisArg 当前调用函数this 的指向对象arg1arg2传递的其他参数利用构造函数实现子类的继承
属性的继承
function Father (uname,age) {// this指向父类的实例对象this.uname uname;this.age age;// 只要把父类的this指向子类的this既可}function Son (uname, age,score) {// this指向子类构造函数// this.uname uname;// this.age age;// Father(uname,age);Father.call(this,uname,age);this.score score;}Son.prototype.sing function () {console.log(this.uname 唱歌)}var obj new Son(刘德华,22,99);console.log(obj.uname);console.log(obj.score);obj.sing();方法的继承
实现方法把父类的实例对象保存给子类的原型对象
一般情况下对象的方法都在构造函数的原型对象中设置通过构造函数无法继承父类方法。核心原理①将子类所共享的方法提取出来让子类的prototype 原型对象 new 父类() ②本质子类原型对象等于是实例化父类因为父类实例化之后另外开辟空间就不会影响原来父类原型对象③将子类的constructor function Father () {}Father.prototype.chang function () {console.log(唱歌);}function Son () {}// Son.prototype Father.prototype;Son.prototype new Father();var obj new Son();obj.chang();Son.prototype.score function () {console.log(考试);}// obj.score();// console.log(Son.prototype);console.log(Father.prototype);注意一定要让Son指回构造函数
实现继承后让Son指回原构造函数Son.prototype new Father();Son.prototype.constructor Son;总结用构造函数实线属性继承用原型对象实线方法继承
组合继承构造函数和原型对象
属性调用父构造函数用call改变this指向
方法父实例对象赋值给子原型对象最后再指回构造函数本身
上午回顾
JavaScript查找成员机
原型链就是由原型构成链状结构作用查找成员机制
继承ES6extends
ES5组合继承构造函数和原型对象
属性调用父类的时候用call改变this指向
方法父实例对象赋值给子原型对象再指回构造函数本身
类的本质
class本质还是function类的所有方法都定义在类的prototype属性上类创建的实例,里面也有__proto__ 指向类的prototype原型对象所以ES6的类它的绝大部分功能ES5都可以做到新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。所以ES6的类其实就是语法糖.语法糖:语法糖就是一种便捷写法. 简单理解, 有两种方法可以实现同样的功能, 但是一种写法更加清晰、方便,那么这个方法就是语法糖class Star {}console.log( typeof Star );var obj new Star();console.log(obj.__proto__);console.log(Star.prototype);ES6类class 类名 {// 构造函数constructor (uname, age) {this.uname age;this.age age;}// 方法say () {console.log(方法);}}// 实例化var obj new 类型(姓名, 23);// 继承class Father {}class Son extends Father {super调用父类里面的方法}ES5
创建对象字面量var obj {};构造函数var obj new Object();自定义构造函数// 构造函数function Person (uname age) {this.uname uname; this.age age;}// 原型对象Person.prototype.say function () {方法}// 实例对象var obj new Person(姓名, 21);注意构造函数里面放属性原型对象里面放方法原型对象每个构造函数都有这个prototype作用共享方法节省内存对象原型每个对象都有__proto__作用指向原型对象(prototype)构造函数construtor作用指回构造函数本身原型链每个对象都有原型原型对象也是对象也有原型一直串联起来作用用来提供成员查找机制继承组合继承构造函数原型对象属性用call改变父类里面的this指向方法父实例对象赋值给子原型对象最后指回构造函数本身;
ES6 中的新增方法
ES6 中给我们新增了一些方法可以很方便的操作数组或者字符串这些方法主要包括数组方法字符串方法数组方法
迭代(遍历)方法forEach()、map()、filter()、some()、every()这些方法都是遍历数组的forEach();遍历数组
filter();遍历筛选数组
some();遍历查找数组数组.方法名(function (当前项当前项索引值数组本身) {});forEach()
array.forEach(function(currentValue, index, arr))currentValue数组当前项的值
index数组当前项的索引
arr数组对象本身var arr [red,blue,yellow,orange];arr.forEach(function (elm,i,arrAbc) {console.log(elm,i,arrAbc);
});filter()
array.filter(function(currentValue, index, arr))filter() 方法创建一个新的数组新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组
注意它直接返回一个新数组filter筛选指定的满足条件的元素组成新数组返回currentValue: 数组当前项的值index数组当前项的索引arr数组对象本身回调函数里面添加return添加返回条件var arr [100,66,99,123,333,33,44,66];var reArr arr.filter(function (elm, a, n) {// console.log(elm,a, n);return elm % 2 0;});console.log(reArr);some()
array.some(function(currentValue, index, arr)) 【注意找到或者满足条件立刻停止】some() 方法用于检测数组中的元素是否满足指定条件. 通俗点查找数组中是否有满足条件的元素注意它返回值是布尔值, 如果查找到这个元素, 就返回true , 如果查找不到就返回false.如果找到第一个满足条件的元素,则终止循环. 不在继续查找.currentValue: 数组当前项的值index数组当前项的索引arr数组对象本身var arr [100,200,300,400];
var re arr.some(function (elm,i,arr) {// console.log(elm,i,arr);console.log(i);return elm 200;});
console.log(re);
字符串方法
**trim方法**删除两边的空白符
var str abcd ef gab cd ;
console.log( str );
console.log( str.trim() );// 获取元素var btn document.getElementById(btn);var txt document.getElementById(txt);// 添加事件btn.onclick function () {// 写的内容if (txt.value.trim().length 0) {alert(允许提交);} else {alert(不允许提交);}}课程回顾
原型链由原型串联起来的链式结构提供成员查找的机制
继承组合继承构造函数【属性】原型对象【方法】
属性调用父构造函数的时候用call改变this的指向
方法父实例对象赋值给子原型对象最后指回构造函数本身
类的本质函数ES6语法糖
新增方法
数组方法forEachfiltersome
字符串方法trim
) {
// console.log(elm,a, n);
return elm % 2 0;});console.log(reArr);**some()**
array.some(function(currentValue, index, arr)) 【注意找到或者满足条件立刻停止】
some() 方法用于检测数组中的元素是否满足指定条件. 通俗点查找数组中是否有满足条件的元素
注意它返回值是布尔值, 如果查找到这个元素, 就返回true , 如果查找不到就返回false.
如果找到第一个满足条件的元素,则终止循环. 不在继续查找.
currentValue: 数组当前项的值index数组当前项的索引
arr数组对象本身 var arr [100,200,300,400]; var re arr.some(function (elm,i,arr) { // console.log(elm,i,arr); console.log(i); return elm 200; }); console.log(re);
## 字符串方法**trim方法**删除两边的空白符
var str ’ abcd ef gab cd ; console.log( str ); console.log( str.trim() );
// 获取元素 var btn document.getElementById(‘btn’); var txt document.getElementById(‘txt’); // 添加事件btn.onclick function () {// 写的内容if (txt.value.trim().length 0) {alert(允许提交);} else {alert(不允许提交);}}课程回顾 **原型链**由原型串联起来的链式结构提供成员查找的机制 **继承**组合继承构造函数【属性】原型对象【方法】 属性调用父构造函数的时候用call改变this的指向 方法父实例对象赋值给子原型对象最后指回构造函数本身 类的本质函数ES6语法糖 新增方法 **数组方法forEachfiltersome** 字符串方法trim.
