搜索引擎网站推广法 怎么做百度热搜词排行榜

搜索引擎网站推广法 怎么做,百度热搜词排行榜,英文网站制作注意点,汕头市建筑信息网站JavaScript 高级 - 第3天 了解构造函数原型对象的语法特征#xff0c;掌握 JavaScript 中面向对象编程的实现方式#xff0c;基于面向对象编程思想实现 DOM 操作的封装。 了解面向对象编程的一般特征掌握基于构造函数原型对象的逻辑封装掌握基于原型对象实现的继承理解什么原…JavaScript 高级 - 第3天了解构造函数原型对象的语法特征掌握 JavaScript 中面向对象编程的实现方式基于面向对象编程思想实现 DOM 操作的封装。了解面向对象编程的一般特征掌握基于构造函数原型对象的逻辑封装掌握基于原型对象实现的继承理解什么原型链及其作用能够处理程序异常提升程序执行的健壮性文章目录JavaScript 高级 - 第3天编程思想面向过程编程面向对象编程oop面向过程和面向对象的对比构造函数原型原型对象constructor 属性对象原型原型继承原型链编程思想学习 JavaScript 中基于原型的面向对象编程序的语法实现理解面向对象编程的特征。面向过程编程面向过程就是分析出解决问题所需要的步骤然后用函数把这些步骤一步一步实现使用的时候再一个一个的依次调用就可以了。举个例子蛋炒饭简单来说面向过程就是按照我们分析好的步骤按照步骤解决问题。面向对象编程oop面向对象是把事务分解成为一个个对象然后由对象之间分工与合作。在面向对象程序开发思想中每一个对象都是功能中心具有明确分工。总之面向对象是以对象功能来划分问题而不是步骤。面向对象编程具有灵活、代码可复用、容易维护和开发的优点更适合多人合作的大型软件项目。面向对象的特性封装性继承性多态性面向过程和面向对象的对比对比其他语言前端更多是面向过程的。构造函数封装是面向对象思想中比较重要的一部分JS面向对象可以通过构造函数实现的封装。同样的将变量和函数组合到了一起并能通过this实现数据的共享所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的。对比以下通过面向对象的构造函数实现的封装script// 构造函数 将公共的属性和方法封装到构造函数中functionPerson(){this.namenamethis.ageagethis.sing(){console.log(我会唱歌)}}// 实例对象 获得了构造函数中封装的所有逻辑letp1newPerson(小明,25)letp2newPerson(小红,22)// 对象彼此独立 互不影响console.log(p1p2)// false/script前面我们学过的构造函数方法很好用但是存在浪费内存的问题script// 构造函数 将公共的属性和方法封装到构造函数中functionPerson(){this.namenamethis.ageagethis.sing(){console.log(我会唱歌)}}// 实例对象 获得了构造函数中封装的所有逻辑letp1newPerson(小明,25)letp2newPerson(小红,22)// 对象彼此独立 互不影响console.log(p1p2)// false// 两个对象指向堆中的地址不同 因此不是一个sing方法console.log(p1.singp2.sing)// false// 但这两个对象中的sing方法内容是完全相同的 这意味着我们多开了一个空间再次存放sing方法 这就导致了内存的浪费/script示意图总结构造函数体现了面向对象的封装特性构造函数实例创建的对象彼此独立、互不影响原型原型对象构造函数通过原型分配的函数是所有对象所共享的。JavaScript 规定每一个构造函数都有一个prototype属性指向另一个对象所以我们也称为原型对象。scriptfunction Person() { this.name name } // 每个构造函数都有 prototype 属性 console.log(Person.prototype) // 原型对象 Object /script这个对象可以挂载函数对象实例化不会多次创建原型上函数节约内存。我们可以把那些不变的方法直接定义在 prototype 对象上这样所有对象的实例就可以共享这些方法。我们还是以上面的例子来演示script// 公共的属性写到构造函数里functionPerson(){this.namenamethis.ageage}// 公共的方法写到原型对象上 相当于给原型对象添加新方法Person.prototype.singfunction(){console.log(我会唱歌)}letldhnewPerson(刘德华,55)letzxynewPerson(张学友,58)ldh.sing()// 调用 因为是ldh调用 因此sing的this指向ldhzxy.sing()// 调用console.log(ldh.singzxy.sing)// true/script构造函数和原型对象中的this都指向实例化的对象。示意图了解了 JavaScript 中构造函数与原型对象的关系后再来看原型对象具体的作用如下代码所示script// 自定义两个数组扩展方法 求和 最大值// 1. 我们定义的这个方法任何一个数组实例对象都可以使用// 2. 自定义的方法写到 数组.prototype 身上// 最大值 这里不推荐用箭头函数 因为箭头函数没有 thisArray.prototype.maxfunction(){// 不需要传参 因为原型对象 this 指向调用者 即 arr// 但是 Math.max() 的参数不能是数组 因此我们需要使用展开运算符展开数组// 相当于 Math.max(1, 2, 3)this.Math.max(...this)}// 实例化constarr[1,2,3]// 相当于 const arr new Array(1, 2, 3)arr.max()// 调用console.log(arr.max())// 3// 求和Array.prototype.sum()function(){returnthis.reduce((prev,item)previtem,0)}console.log(arr.sum())// 6/script如果构造函数Person中定义和原型对象一样的方法会发生什么呢scriptfunctionPerson(){// 此处定义同名方法 sayHithis.sayHifunction(){console.log(嗨!);}}// 为构造函数的原型对象添加方法Person.prototype.sayHifunction(){console.log(Hi~);}letp1newPerson();p1.sayHi();// 输出结果为 嗨!/script构造函数Person中定义与原型对象中相同名称的方法这时实例对象调用则是构造函中的方法sayHi。通过以上简单示例不难发现 JavaScript 中对象的工作机制当访问对象的属性或方法时先在当前实例对象是查找然后再去原型对象查找并且原型对象被所有实例共享。scriptfunctionPerson(){// 此处定义同名方法 sayHithis.sayHifunction(){console.log(嗨!this.name)}}// 为构造函数的原型对象添加方法Person.prototype.sayHifunction(){console.log(Hi~this.name)}// 在构造函数的原型对象上添加属性Person.prototype.name小明letp1newPerson()p1.sayHi();// 输出结果为 嗨!letp2newPerson()p2.sayHi()/script总结结合构造函数原型的特征实际开发重往往会将封装的功能函数添加到原型对象中。constructor 属性每个原型对象prototype里面都有个constructor属性constructor就是构造函数的意思。作用该属性指向该原型对象的构造函数。简单来说constructor就是原型对象用来找到爸爸的。script// 构造函数 constructorfunctionStar(){}console.log(Star.prototype)// 原型对象中包含 constructorconstldhnewStar()console.log(Star.prototype.constructorStar)// true/script使用场景如果有多个对象的方法一个一个添加的方式太麻烦了我们可以给原型对象采取对象形式赋值。scriptfunctionStar(){}console.log(Star.prototype)// 此时还包含 constructor// 采用对象形式赋值 会覆盖原来的 prototype 对象// 那么就没有了 constructorStar.prototype{sing:function(){console.log(唱歌)},dance:function(){console.log(跳舞)},}console.log(Star.prototype)// 新增 sing dance 方法 但不包含 constructor/script但是这样就会覆盖构造函数原型对象原来的内容这样修改后的原型对象constructor就不再指向当前构造函数了那么原型对象就和普通的对象没有任何区别了。为了解决这个问题我们可以在修改后的原型对象中添加一个constructor指向原来的构造函数。scriptfunctionStar(){}Star.prototype{// 重新指回创造这个原型对象的 构造函数constructor:Star,sing:function(){console.log(唱歌)},dance:function(){console.log(跳舞)},}console.log(Star.prototype)// 既有新方法 也包含 constructor/script对象原型构造函数中可以创建实例对象构造函数还有一个原型对象一些公共的属性或者方法放到这个原型对象上但为什么实例对象可以访问原型对象里面的属性和方法呢对象都会有一个属性__proto__指向构造函数的prototype原型对象之所以我们对象可以使用构造函数prototype原型对象的属性和方法就是因为对象有__proto__原型的存在。我们到代码中体会一下scriptfunctionStar(){}constldhnewStar()console.log(ldh)// 可以看到实例对象中包含 [[prototype]] 对象// 对象原型__proto__ 指向该构造函数的原型对象console.log(ldh.__proto__)// 可以看到这个对象也有 constructorconsole.log(ldh.__proto__Star.prototype)// 指向prototype// 对象原型里的constructor 指向构造函数 Starconsole.log(ldh.__proto__.constructorStar)// 指向父亲 Star/script简单来说构造函数是父亲创建了两个儿子一个是哥哥原型对象prototype一个是弟弟实例对象而弟弟也会指向哥哥通过__proto__。兄弟俩通过都constructor指向父亲。注意__proto__是JS非标准属性因此在浏览器中显示的是[[prototype]]标准__proto__是只读的只能获取不能赋值[[prototype]]和__proto__意义相同用来表明当前实例对象指向哪个原型对象prototype__proto__对象原型里面也有一个constructor属性指向创建该实例对象的构造函数原型继承继承是面向对象编程的另一个特征通过继承进一步提升代码封装的程度JavaScript 中大多是借助原型对象实现继承的特性。龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义。我们通过一个例子来体会这个过程bodyscript// 构造两个函数functionWoman(){eyes:2,head:1}// 实例对象constrednewWoman()console.log(red)// {eyes: 2, head: 1}functionMan(){eyes:2,head:1}constbluenewMan()console.log(blue)// {eyes: 2, head: 1}/script/body可以发现这两个函数拥有相同的属性那么我们可以把相同的属性封装成一个对象让两个函数共享这一个对象节约内存bodyscript// 继续抽取 把公共的部分放到原型对象上constPerson{eyes:2,head:1}functionWoman(){}// 通过 原型继承 将公共部分赋值给prototype 注意还要加上constructorWoman.prototypePersonWoman.prototype.constructorWoman// 实例对象constrednewWoman()console.log(red)// {eyes: 2, head: 1, constructor: f}functionMan(){}// 通过 原型继承 PersonMan.prototypePersonMan.prototype.constructorManconstbluenewMan()console.log(blue)// {eyes: 2, head: 1, constructor: f}/script/body如果此时我们想给Woman增加一个新的方法bodyscript// 继续抽取 把公共的部分放到原型对象上constPerson{eyes:2,head:1}functionWoman(){}Woman.prototypePersonWoman.prototype.constructorWoman// 给女人新添加一个方法 生孩子Woman.prototype.babyfunction(){console.log(宝宝)}// 实例对象constrednewWoman()console.log(Woman.prototype)// 多了 baby 这个方法console.log(red)functionMan(){}// 通过 原型继承 PersonMan.prototypePersonMan.prototype.constructorManconstbluenewMan()console.log(Man.prototype)// 也多了 baby这和我们的想法矛盾console.log(blue)/script/body当我们给Woman增加一个新的方法时发现Man也被添加了同样的方法。这是因为男人和女人都同时使用了同一个对象根据引用类型的特点他们指向同一个对象修改其中一个构造函数的方法另一方函数也会被影响如果想要解决这个问题我们可以独立出它们赋值的对象Woman对应Person1Man对应Person2bodyscriptconstPerson1{eyes:2,head:1}constPerson2{eyes:2,head:1}functionWoman(){}// 分别对应不同的对Woman.prototypePerson1Woman.prototype.constructorWoman// 给女人新添加一个方法 生孩子Woman.prototype.babyfunction(){console.log(宝宝)}// 实例对象constrednewWoman()console.log(Woman.prototype)console.log(red)functionMan(){}// 通过 原型继承 PersonMan.prototypePerson2Man.prototype.constructorManconstbluenewMan()console.log(Man.prototype)console.log(blue)/script/body但根据我们的封装思想相同的部分是需要被抽取出来再次封装的根据我们的需求结构一样但不是同一个对象。由此我们想到构造函数。bodyscript// 构造函数 new 出来的对象 结构一样但是对象不一样functionPerson(){this.eyes2this.head1}functionWoman(){}// 分别对应不同的对Woman.prototypenewPerson()Woman.prototype.constructorWoman// 给女人新添加一个方法 生孩子Woman.prototype.babyfunction(){console.log(宝宝)}// 实例对象constrednewWoman()console.log(Woman.prototype)// 有 babyconsole.log(red)functionMan(){}// 通过 原型继承 PersonMan.prototypenewPerson()Man.prototype.constructorManconstbluenewMan()console.log(Man.prototype)// 没有 babyconsole.log(blue)/script/body这样两个函数之间可以互不影响地修改自己的属性和方法。总而言之原型继承最核心的就是父构造函数和字构造函数之间的继承。也就是Woman.prototype new Person().script// 构造函数 new 出来的对象 结构一样但是对象不一样functionPerson(){this.eyes2this.head1}// console.log(new Person)// 女人 构造函数 继承 PersonfunctionWoman(){}// Woman 通过原型来继承 Person// 父构造函数父类 子构造函数子类// 子类的原型 new 父类Woman.prototypenewPerson()// {eyes: 2, head: 1}// 指回原来的构造函数Woman.prototype.constructorWoman// 给女人添加一个方法 生孩子Woman.prototype.babyfunction(){console.log(宝贝)}constrednewWoman()console.log(red)// 男人 构造函数 继承 PersonfunctionMan(){}// 通过 原型继承 PersonMan.prototypenewPerson()Man.prototype.constructorManconstpinknewMan()console.log(pink)/script当然原型继承也是有一定缺陷的还有更严格的继承类class。原型链当我们构造函数时查看prototype时会发现prototype也有__proto__bodyscriptfunctionPerson(){}constldhnewPerson()console.log(ldh.__proto__Person.prototype)// trueconsole.log(Person.prototype)// 你会发现 prototype 也有__proto__// 其实每个对象都有一个__proto__/script/body对象原型指向的是原型对象那么prototype.__proto__指向哪个原型对象呢我们上面提到__proto__是指向父类的prototype属性那么这里的prototype.__proto__也应该是指向prototype的父类。prototype是一个对象每个对象都有一个父类Object构造函数。如此prototype.__proto__应该指向的是父类的prototype也就是Object.prototype.bodyscriptfunctionPerson(){}constldhnewPerson()console.log(ldh.__proto__Person.prototype)// trueconsole.log(Person.prototype.__proto__Object.prototype)// true/script/body这时候我们会想到Object.prototype也是对象那么Object.prototype.__proto__指向谁呢由于Object.prototype没有父类因此Object.prototype.__proto__指向的是空指针null。我们可以通过示意图来理解这种关系基于原型对象的继承使得不同构造函数的原型对象关联在一起并且这种关联的关系是一种链状的结构我们将原型对象的链状结构关系称为原型链。原型链查找规则① 当访问一个对象的属性包括方法时首先查找这个对象自身有没有该属性。② 如果没有就查找它的原型也就是__proto__指向的prototype原型对象一般原型会存储公共的属性和方法③ 如果还没有就查找原型对象的原型Object的原型对象Object.prototype④ 依此类推一直找到 Object 为止null⑤__proto__对象原型的意义就在于为对象成员查找机制提供一个方向或者说一条路线⑥ 可以使用instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。简单来说就是检测某个实例对象是否属于某个构造函数。scriptfunctionPerson(){}constldhnewPerson()console.log(ldhinstanceofPerson)// true 属于console.log(ldhinstanceofObject)// trueconsole.log(ldhinstanceofArray)// falseconsole.log([1,2,3]instanceofArray)// trueconsole.log(ArrayinstanceofObject)// true 数组也属于对象 因为数组也能通过构造函数创建出来 一切皆对象/script