呼家楼做网站的公司哪家好,2017网站开发发展前景,低价做网站,汕尾网站建设 生意好吗实例对象和构造函数的关系及原型#xff1a; 实例对象是通过构造函数创建出来的#xff0c;实例对象的构造器constructor就是指向构造函数的#xff1b;每个实例对象中的同一方法的指向是各不相同的#xff0c;但是其属性值相同的属性可以相同#xff0c;这样会造成内存浪…实例对象和构造函数的关系及原型 实例对象是通过构造函数创建出来的实例对象的构造器constructor就是指向构造函数的每个实例对象中的同一方法的指向是各不相同的但是其属性值相同的属性可以相同这样会造成内存浪费可以将这个方法的函数提到构造函数的外面这样就不会造成内存浪费了但是这种方式容易造成命名问题实际开发中会通过原型来解决这个问题原型的作用共享数据节省内存空间将需要共享的属性或方法直接写在原型中即可 如下 script// 解决多个对象中方法指向不同而带来内存浪费问题将方法的函数提到对象外function basketball() {console.log(篮球);};// 构造函数function Person(name, age, height, weight) {this.name name;this.age age;this.height height;this.weight weight;//对象中的方法使用构造函数内的函数this.eat function() {console.log(吃);};//对象中的方法调用构造函数外面的函数this.play basketball;};// 通过原型给构造函数添加方法Person.prototype.song function() {console.log(可可托海的牧羊人);};var person1 new Person(jack, 18, 170, 50);var person2 new Person(杰克, 18, 170, 50);console.log(person1.constructor Person); //true对象的原型指向构造函数console.log(person2.age person1.age); //true各个对象的属性值相等的情况下这这两个值相同console.log(person2.eat person1.eat); //false对象的方法的函数写在构造函数中时各个对象的指向不同console.log(person2.basketball person1.basketball); //true对象的方法的函数写在构造函数外时各个对象的指向相同console.log(person2.song person1.song); //true最终要通过原型的方式给对象添加相同的方法实际开发中采用的方法/script简单原型语法 给原型添加属性或者方法可以节省内存空间共享数据但是每次都要通过prototype的方式多次重复为此可以将这些属性或方法通过对象的形式写在{}中但是这种方法需要手动写上构造器这个属性如 scriptfunction Person(names, age) {this.names names;this.age age;};// 通过对象的方式给原型添加属性和方法后前面不能在以普通的方式添加属性或方法否则会报错或undefined添加在对象形式后面是可以的Person.prototype {constructor: Person, //手动添加构造器weight: 49,height: 180,eat: function() {console.log(面条)}};Person.prototype.colors red; //在对象形式的后面添加新的属性或方法是没事的Person.prototype.play function() {console.log(篮球)}; //在对象形式的后面添加新的属性或方法是没事的var per new Person(jack, 17);per.eat()console.log(per.weight);console.log(per.colors);per.play();/script原型中方法可以互相访问 原型中的方法可以互相访问方法中可以调用属性如果要访问一个属性或方法首先会到实例对象中去找若无才会去原型中找。若还是没有则返回undefined scriptfunction Person(names, age) {this.names names;this.age age;};Person.prototype {constructor: Person, //手动添加构造器weight: 49,height: 180,eat: function() {console.log(面条);this.song();},song: function() {console.log(可可托海的牧羊人);console.log(this.height);}};var per new Person(jack, 17);per.eat()console.log(per.colors);/script内置对象原型中添加方法 通过原型的方式可以给内置对象添加自定义方法 scriptString.prototype.hello function() {console.log(hello);};var str new String();str.hello();//给数组添加求和方法var arrs new Array(1, 2, 3);Array.prototype.sums function() {var sum 0;for (var i 0; i this.length; i) {sum this[i];};return sum;};console.log(arrs.sums());/script将局部变量变成全局变量 将局部变量变成全局变量的方式window.变量名 值 原型链 实例对象和原型直接的关系通过__proto__来联系这种关系称为原型链。实例的指向可以通过proto进行改变。 通过原型继承属性或方法 通过改变prototype的指向可以继承父级的属性或方法如 scriptfunction Person(names) {this.names names;};Person.prototype.eat function() {console.log(吃大米);};function Father(age) {this.age age;};// 将Father构造函数中的原型指向new Person()实例对象中的原型Father.prototype new Person(jack);Father.prototype.work function() {console.log(工作);};function Myfather(weight) {this.weight weight;};// 将Father构造函数中的原型指向new Person()实例对象中的原型Myfather.prototype new Father(30);var myfather new Myfather(50)console.log(myfather.names --- myfather.age --- myfather.weight);myfather.eat();myfather.work();/script通过call借用构造函数实现继承 通过改变原型的指向实现继承存在一个缺陷改变指向时初始化了实例对象属性的值已经写死无法改变为了解决这个缺陷可以借用构造函数实现继承(call方法的使用在需要继承父级属性的子级构造函数中通过父级构造函数.call(改变函数this的指向,父级构造函数中的参数,子级构造函数中的参数))子级构造函数中的形参写上父级构造函数中的形参但是这种方式只能继承属性若要继承方法那么就要将借用构造函数和改变原型相结合如 scriptfunction Person(names, sex) {this.names names;this.sex sex;};Person.prototype.eat function() {console.log(吃饭);};//借用构造函数实现属性继承function Student(names, sex, score) {Person.call(this, names, sex, score);//第一个参数是改变Person中this的指向为Student构造函数实例对象this.score score;};// 单独的借用构造函数只能实现属性继承方法不能继承因此实际开发中可以将借用构造函数和改变原型指向结合使用Student.prototype new Person();var student1 new Student(jack, 男, 70);var student2 new Student(sharry, 女, 80);console.log(student1.names, student1.sex, student1.score);console.log(student2.names, student2.sex, student2.score);student1.eat();student2.eat();/scriptapply调用函数 apply(参数1,数组形式参数2)和call相似也可以调用函数并改变函数中this的指向,第一个参数改变函数中this的指向第二个参数以数组的形式传参数返回的是字符串形式的值但是apply的主要用法是调用内置对象方法来实现某些函数中没有的方法的功能如 script// 实现call方法的作用var obj {weight: 120};function fn(x, y, z) {console.log(this); //{weight: 120}console.log(x, y, z); //age 12 names};fn.apply(obj, [age, 12, names]);// 如借用Math中min方法来实现求数组中最小值var array [2, 3, 4, 1]var minValue Math.min.apply(null, array); //当一个形参不需要实参时可以用null代替这里最好将指向指为apply的调用者console.log(minValue); //1console.log(Math.max(2, 3, 4, 1)); //4,Math对象中求最大值最小值的方法中传入的是数字/scriptbind拷贝函数 fn.bind(参数1参数2)不会调用原函数但是可以通过第一个参数改变函数this的指向并返回一个新函数此方法不会立即执行函数而call和apply都会立即执行行数因此bind在实际开发中用的会比较多。 拷贝继承 浅拷贝指的是地址的拷贝深拷贝指完全的把堆上的代码也拷贝但是地址不拷贝。 scriptvar obj1 {names: jack,age: 18};// 1.通过改变指针实现拷贝继承var obj2 obj1;console.log(obj2.names);// 2.通过for-in遍历将obj1的属性和值存到obj3中var obj3 {};for (var key in obj1) {obj3[key] obj1[key];};console.log(obj3.names);// 3.通过遍历原型的属性和方法拷贝对象var obj4 {};function Person() {};Person.prototype.names sharry;Person.prototype.eat function() {console.log(面条);};var person new Person(sharry);for (var keys in Person.prototype) {obj4[keys] Person.prototype[keys];};console.log(obj4.names);obj4.eat();/script构造函数、实例对象、原型之间的关系 通过class来创建对象 class类指的是一类具有相似属性或方法的事物通过new也可以创建实例对象,其语法是class 类名{},class类的大括号中要写构造器constructor(形参){this.属性或方法}但是实际开发中不建议将方法写在构造器中而是省去关键字function直接写在class类中之后通过new实例化对象如 scriptclass Person {constructor(names, age) {this.names names;this.age age;// 方法不建议这样写this.eat function() {console.log(面条)};};// 类中的方法建议写在类中play() {console.log(篮球)};};var personOne new Person(jack, 18);console.log(names: personOne.names ---age: personOne.age);personOne.eat();personOne.play();/scriptclass类的继承 class类可以继承一个类的属性和方法其语法class 新类名 extends 被继承类名 {};之后通过new实例化对象即可如 scriptclass Person {constructor(names) {this.names names;this.eat function() {console.log(面条)};};play() {console.log(篮球)};};// 继承class Son extends Person {};var sonOne new Son(jack);console.log(sonOne.names);sonOne.eat();sonOne.play();/scriptsuper()调用父级类中的构造器 被继承后的类若要调用父级的方法而方法中有参数此时给子级实例对象传入参数是无法被父级中的方法中拿到的此时需要给子级构造器中通过super(参数)将子级实例对象中的参数传给父级构造器,super还可以调用父类中的父类中的普通方法如 scriptclass Person {constructor(x, y) {this.x x;this.y y;};sum() {return this.x this.y;};play() {console.log(篮球);};};class Son extends Person {constructor(a, b) {// 这里不能直接通过this来设置属性接收参数而要通过super()调用父级中的构造器才能调用父级的方法super(a, b);//必须在this接收参数之前调用super// this.a a;//这里的this.参数 是给自己的方法准备的参数自己的方法调用时需要接收的参数// this.b b;}play() {super.play();console.log(排球);}; };var sonOne new Son(1, 2);console.log(sonOne.sum());sonOne.play(); //方法的调用首先会先 从自己的类中找若没有则去父级类中找若还是没有会报错其中有则执行方法(就近原则)/script开启严格模式 严格模式在IE10以上版本才支持消除了javascript中的一些问题写法若要给某个作用域开启严格模式则在该作用域写入以下代码即可 use strict;//用来开启严格模式严格模式指的是书写代码必须按照代码规范不能省略代码高阶函数 高阶函数是对其他函数进行操作的函数它接受的参数是函数或返回的是函数。 scriptfunction f1(callback) {callback callback();};f1(function f2() {console.log(这是高阶函数)});/script闭包 闭包指有权访问另一函数作用域中变量的函数在普通函数中是无法访问到其他作用域的变量的,其作用是延伸了变量的作用范围 scriptfunction f() {var str 123;function f2() {console.log(str);};return f2;};var result f(); //这里的f接收的是f2函数相当于在f外面打印str高阶函数实现闭包result();/scriptscript// 利用闭包打印出li的类容类似这种问题可以采用for循环里面首先放入自执行函数自执行函数里面写入处理业务的代码// 通过遍历将循环里面的所有代码存到内存中等定时器启动后执行业务代码闭包也有坏处var liList document.querySelectorAll(li);for (var i 0; i liList.length; i) {(function(x) {var ids setInterval(function() {console.log(liList[x].innerHTML);clearInterval(ids);}, 2000);})(i);};/script递归 递归指一个函数在内部可以调用自己本身那么这个函数就是自己由于递归可能出现死循环发生栈溢出所以必须要加退出条件return。 scriptvar i 0;function f() {console.log(i);if (i 5) {return;};i;f();};f();/scriptes6内容简介 关键字let、const let关键字是es6中声明变量的其作用和var相似let声明的变量只在块级有效,块级作用域指{}里面没有变量提升必须先声明后使用具有暂时性死区性使用一个变量先从本块级作用域查找有则使用注意变量没有提升,MDN文档中有变量提升但是会抛出错误。 const关键字是es6中声明常量的因此若要改变这个关键字声明的常量就会报错它也是在块级有效变量不会提升MDN文档中有变量提升但是会抛出错误。 scriptif (true) {var num1 1;console.log(num1); //1};if (true) {let num2 2;console.log(num2); //2};if (true) {const num3 3;console.log(num3); //3};console.log(num1); //1console.log(num2); //num2 is not definedconsole.log(num3); //num3 is not defined/script解构赋值 es6中允许从数组或对象中提取值按照对应位置对变量赋值对象中每个属性名和前面属性名一致若在对象中前面也是键值对的形式那么这值实际是变量接收的是对应的后面对象张的值如 scriptvar [a, b, c] [1, 2, 3];var {d,e,f}{d:4,e:5,f:6};var {dn: num1,en: num2,fn: num3} {dn: 4,en: 5,fn: 6};console.log(b);//2console.log(e);//5console.log(num2); //5/script箭头函数 箭头函数是es6中另一种写法其作用和普通函数一样只是在书写上比较简洁了。箭头函数没有函数名因此通常用变量接收如const fn (){};,小括号中可以传入形参箭头函数中的this不指向调用者而指函数定义位置的上下文中this即箭头函数所在作用域中的this scriptvar sum (x, y) {console.log(x y);};sum(2, 3); //5// 当函数体中只有一句执行代码且这行代码就是函数的返回值此时可以省略{}var sum1 (x, y) console.log(x y);sum1(1, 2); //3// 当函数的形参只有一个的时候可以省略():const num x console.log(x);num(5); //5/script剩余参数 当函数的实参大于一个形参的个数时给形参最后一个参数见面加…后当然可以给第一个形参直接加…此时将传入的实参以数组的形式返回剩余的实参则会以数组的形式存在最后一个形参里面 scriptfunction num(num1, num2, ...numn) {console.log(numn);};num(1, 2, 3, 4); //[3, 4]// 剩余参数和解构配合var [num1, ...num] [1, 2, 3, 4, 5];console.log(num); //[2, 3, 4, 5]/script扩展运算符 扩展运算符可将数组或对象转为用逗号分隔的参数序列其语法是在变量名前面加…如 scriptvar arr [1, 2, 3];console.log(...arr); //1 2 3,原本...arr里面是用逗号隔开的但是这里是因为console.log将里面的逗号当做分隔符了。//扩展运算符可以将多个数组合并var arr1 [1, 2, 3];var arr2 [4, 5];var arr3 [6];var arrn [...arr1, ...arr2, ...arr3];console.log(arrn); //[1, 2, 3, 4, 5, 6]// 利用扩展运算符将伪数组转换为真数组其语法[...伪数组变量名]/script模板字符串 使用反引号的字符串称之为模板字符串可以很好地将变量解析到字符串中的语法其语法在反引号中使用${变量名}模板字符串支持换行支持调用函数如 scriptvar num 2;var str 今天是${num}号;console.log(str);// 调用函数和换行var say () {return hello};var sayhe ${say()}word;console.log(sayhe);/scriptSet数据结构 Set数据结构类似数组但是成员的值都是唯一的当传入的数据中有重复的值时会自动将重复值去掉其是一个构造函数需要实例化对象才能使用const sets new Set();此对象可以接收一个数组数组中的数据会被自动存到set数据结构中支持forEach遍历set数据 scriptvar sets new Set([1, 2, 2]);console.log(sets.size); //2size属性用来获取set中存的不重复值的个数和length类似。// 给sets增加数据add(value)sets.add(3);console.log(sets); //Set(3) {1, 2, 3}//删除sets数据中的值delete(value),并返回一个布尔值用于判断是否删除成功var result sets.delete(1);console.log(result); //trueconsole.log(sets); //Set(2) {2, 3}// 判断某个值是否是sets中的成员has(value)返回一个布尔值var results sets.has(7);console.log(results); //false// 清空sets中的数据clear():sets.clear();console.log(sets);//Set(0) {}/script数组查询find和findindex 在es6中js为数组提供了一个遍历数组查询某项的APIfind-----需要传入一个函数作为参数同样在es6中js为数组提供了一个遍历数组查询某项下标的APIfindIndex—也需要传入一个函数作为参数如下案例 var arr [{id:1,name:一},{id:2,name:二},{id:3,name:三},{id:4,name:四} ]; // 当函数中的条件满足时会终止遍历并返回这个条件的数组项 var result arr.find(function(item){return item.id 3; }); console.log(result);// 当函数中的条件满足时会终止遍历并返回满足条件的这项下标 var resultElse arr.findIndex(function(item){return item.id 4; }); console.log(resultElse)// 原理 Array.prototype.myFind function (conditionFunc) {// var conditionFunc function (item, index) { return item.id 4 }for (var i 0; i this.length; i) {if (conditionFunc(this[i], i)) {return this[i]}} }var ret users.myFind(function (item, index) {return item.id 2 })console.log(ret)提示本文图片等素材来源于网络若有侵权请发邮件至邮箱810665436qq.com联系笔者 删除。 笔者苦海