西安做网站的公司电话,永久在线观看电影网址,本机怎么放自己做的网站,wordpress 顶部工具不知不觉跳入前端「大坑」也已经有大半年了#xff0c;学到了很多知识。为了让知识更好地沉淀#xff0c;我打算写一系列的知识总结#xff0c;希望能在回顾知识的同时也能帮到别的同学。忘记在哪里看到过#xff0c;有人说鉴别一个人是否 js 入门的标准就是看他有没有理解… 不知不觉跳入前端「大坑」也已经有大半年了学到了很多知识。为了让知识更好地沉淀我打算写一系列的知识总结希望能在回顾知识的同时也能帮到别的同学。忘记在哪里看到过有人说鉴别一个人是否 js 入门的标准就是看他有没有理解 js 原型所以第一篇总结就从这里出发。对象JavaScript 是一种基于对象的编程语言但它与一般面向对象的编程语言不同因为他没有类class的概念。对象是什么ECMA-262 把对象定义为「无序属性的集合其属性可以包含基本值、对象或者函数。」简单来说对象就是一系列的键值对key-value我习惯把键值对分为两种属性property和方法method。面向对象编程在我的理解里是一种编程思想。这种思想的核心就是把万物都抽象成一个个对象它并不在乎数据的类型以及内容它在乎的是某个或者某种数据能够做什么并且把数据和数据的行为封装在一起构建出一个对象而程序世界就是由这样的一个个对象构成。而类是一种设计模式用来更好地创建对象。举个例子把我自己封装成一个简单的对象这个对象拥有我的一些属性和方法。//构造函数创建var klaus new Object();klaus.name Klaus;klaus.age 22;klaus.job developer;klaus.introduce function(){ console.log(My name is this.name , I\m this.age years old.);};//字面量语法创建与上面效果相同var klaus { name: Klaus, age: 22, job: developer, introduce: function(){ console.log(My name is this.name , I\m this.age years old.); }};这个对象中name、age 和 job 是数据部分introduce 是数据行为部分把这些东西都封装在一起就构成了一个完整的对象。这种思想不在乎数据name、age 和 job是什么它只在乎这些数据能做什么introduce并且把它们封装在了一起klaus 对象。跑一下题与面向对象编程相对应的编程思想是面向过程编程它把数据和数据行为分离分别封装成数据库和方法库。方法用来操作数据根据输入的不同返回不同的结果并且不会对输入数据之外的内容产生影响。与之相对应的设计模式就是函数式编程。工厂模式创建对象如果创建一个简单的对象像上面用到的两种方法就已经够了。但是如果想要创建一系列相似的对象这种方法就太过麻烦了。所以就顺势产生了工厂模式。function createPerson(name, age, job){ var o new Object(); o.name name; o.age age; o.job job; o.introduce function(){ console.log(My name is this.name , I\m this.age years old.); }; return o;}var klaus createPerson(Klaus, 22, developer);随着 JavaScript 的发展这种模式渐渐被更简洁的构造函数模式取代了。高程三中提到工厂模式无法解决对象识别问题我觉得完全可以加一个_type 属性来标记对象类型构造函数模式创建对象我们可以通过创建自定义的构造函数然后利用构造函数来创建相似的对象。function Person(name, age, job){ this.name name; this.age age; this.job job; this.introduce function(){ console.log(My name is this.name , I\m this.age years old.); };}var klaus new Person(Klaus, 22, developer);console.log(klaus instanceof Person); //trueconsole.log(klaus instanceof Object); //true现在我们来看一下构造函数模式与工厂模式对比有什么不同函数名首字母大写这只是一种约定写小写也完全没问题但是为了区别构造函数和一般函数默认构造函数首字母都是大写。不需要创建对象函数最后也不需要返回创建的对象new 操作符帮你创建对象并返回。添加属性和方法的时候用 thisnew 操作符帮你把 this 指向创建的对象。创建的时候需要用 new 操作符来调用构造函数。可以获取原型上的属性和方法。下面会说可以用 instanceof 判断创建出的对象的类型。new这么看来构造函数模式的精髓就在于这个 new 操作符上所以这个 new 到底做了些什么呢创建一个空对象。在这个空对象上调用构造函数。所以 this 指向这个空对象将创建对象的内部属性__proto__指向构造函数的原型原型后面讲到原型会解释。检测调用构造函数后的返回值如果返回值为对象不包括 null则 new 返回该对象否则返回这个新创建的对象。用代码来模仿大概是这样的function _new(fn){ return function(){ var o new Object(); var result fn.apply(o, arguments); o.__proto__ fn.prototype; if(result (typeof result object || typeof result function)){ return result; }else{ return o; } }}var klaus _new(Person)(Klaus, 22, developer);组合使用构造函数模式和原型模式构造函数虽然很好但是他有一个问题那就是创建出的每个实例对象里的方法都是一个独立的函数哪怕他们的内容完全相同这就违背了函数的复用原则而且不能统一修改已创建实例对象里的方法所以原型模式应运而生。function Person(name, age, job){ this.name name; this.age age; this.job job; this.introduce function(){ console.log(My name is this.name , I\m this.age years old.); };}var klaus1 new Person(Klaus, 22, developer);var klaus2 new Person(Klaus, 22, developer);console.log(klaus1.introduce klaus2.introduce); //false什么是原型我们每创建一个函数他就会自带一个原型对象这个原型对象你可以理解为函数的一个属性函数也是对象这个属性的 key 为 prototype所以你可以通过 fn.prototype 来访问它。这个原型对象除了自带一个不可枚举的指向函数本身的 constructor 属性外和其他空对象并无不同。那这个原型对象到底有什么用呢我们知道构造函数也是一个函数既然是函数那它也就有自己的原型对象既然是对象你也就可以给它添加一些属性和方法而这个原型对象是被该构造函数所有实例所共享的所以你就可以把这个原型对象当做一个共享仓库。下面来说说他具体是如何共享的。上面讲 new 操作符的时候讲过有一步将创建对象的内部属性__proto__指向构造函数的原型这一步才是原型共享的关键。这样你就可以在新建的实例对象里访问构造函数原型对象里的数据。function Person(name, age, job){ this.name name; this.age age; this.job job; this.introduce this.__proto__.introduce; //这句可以省略后面会介绍}Person.prototype.introduce function(){ console.log(My name is this.name , I\m this.age years old.);};var klaus1 new Person(Klaus, 22, developer);var klaus2 new Person(Klaus, 22, developer);console.log(klaus1.introduce klaus2.introduce); //true这样我们就达到了函数复用的目的而且如果你修改了原型对象里的 introduce 函数后所有实例的 introduce 方法都会同时更新是不是很方便呢但是原型绝对不止是为了这么简单的目的所创建的。我们首先明确一点当创建一个最简单的对象的时候其实默认用 new 调用了 JavaScript 内置的 Objcet 构造函数所以每个对象都是 Object 的一个实例用 Object.create(null) 等特殊方法创建的暂不讨论。所以根据上面的介绍每个对象都有一个__proto__的属性指向 Object.prototype。这是理解下面属性查找机制的前提。var klaus { name: Klaus, age: 22, job: developer, introduce: function(){ console.log(My name is this.name , I\m this.age years old.); }};console.log(klaus.friend); //undefinedconsole.log(klaus.toString); //ƒ toString() { [native code] }上面代码可以看出如果我们访问 klaus 对象上没有定义的属性 friend结果返回 undefined这个可以理解。但是同样访问没定义的 toString 方法却返回了一个函数这是不是很奇怪呢其实一点不奇怪这就是 JavaScript 对象的属性查找机制。属性查找机制当访问某对象的某个属性的时候如果存在该属性则返回该属性的值如果该对象不存在该属性则自动查找该对象的__proto__指向的对象的此属性。如果在这个对象上找到此属性则返回此属性的值如果__proto__指向的对象也不存在此属性则继续寻找__proto__指向的对象的__proto__指向的对象的此属性。这样一直查下去直到找到 Object.prototype 对象如果还没找到此属性则返回 undefined。原型链查找讲继承时会详细讲理解了上面的查找机制以后也就不难理解 klaus.toString 其实也就是 klaus.__proto__.toString也就是 Object.prototype.toString所以就算你没有定义依然也可以拿到一个函数。理解了这一点以后也就理解了上面 Person 构造函数里的那一句我为什么注释了可以省略因为访问实例的 introduce 找不到时会自动找到实例__proto__指向的对象的 introduce也就是 Person.prototype.introduce。这也就是原型模式的强大之处因为你可以在每个实例上访问到构造函数的原型对象上的属性和方法而且可以实时修改是不是很方便呢。除了给原型对象添加属性和方法之外也可以直接重写原型对象因为原型对象本质也是一个对象只是别忘记添加 constructor 属性。还需要注意一点如果原型对象共享的某属性是个引用类型值一个实例修改该属性后其他实例也会因此受到影响。以及如果用 for-in 循环来遍历属性的 key 的时候会遍历到原型对象里的可枚举属性。function Person(name, age, job){ this.name name; this.age age; this.job job;}Person.prototype { introduce: function(){ console.log(My name is this.name , I\m this.age years old.); }, friends: [person0, person1, person2]};Object.defineProperty(Person.prototype, constructor, { enumerable: false, value: Person});var klaus1 new Person(Klaus, 22, developer);var klaus2 new Person(Klaus, 22, developer);console.log(klaus1.friends); //[person0, person1, person2]klaus1.friends.push(person3);console.log(klaus1.friends); //[person0, person1, person2, person3]console.log(klaus2.friends); //[person0, person1, person2, person3]for(var key in klaus1){ console.log(key); //name, age, job, introduce, friends}ES6 class如果你有关注最新的 ES6 的话你会发现里面提出了一个关键字 class 的用法难道 JavaScript 要有自己类的概念了吗tan90°不存在的这只是一个语法糖而已上面定义的 Person 构造函数可以用 class 来改写。class Person{ constructor(name, age, job){ this.name name; this.age age; this.job job; } introduce(){ console.log(My name is this.name , I\m this.age years old.); }}Person.prototype.friends [person0, person1, person2];var klaus new Person(Klaus, 22, developer);很遗憾ES6 明确规定 class 里只能有方法而不能有属性所以像 friends 这样的属性可能只能在外面单独定义了。下面简单举几个差异点如果想详细了解可以去看阮一峰的《ECMAScript 6 入门》或者 Nicholas C. Zakas 的《Understanding ECMAScript 6》。class 里的静态方法类似于 introduce是不可枚举的而用 prototype 定义的是可枚举的。class 里面默认使用严格模式。class 已经不属于普通的函数了所以不使用 new 调用会报错。class 不存在变量提升。class 里的方法可以加 static 关键字定义静态方法这种静态方法就不是定义在 Person.prototype 上而是直接定义在 Person 上了只能通过 Person.method() 调用而不会被实例共享。作用域安全的构造函数不管是高程还是其他的一些资料都提到过作用域安全的构造函数这个概念因为构造函数如果不用 new 来调用就只是一个普通的函数而已这样在函数调用的时候 this 会指向全局严格模式为 undefined这样如果错误调用构造函数就会把属性和方法定义在 window 上。为了避免这种情况可以将构造函数稍加改造先用 instanceof 检测 this 然后决定调用方法。function Person(name, age, job){ if(this instanceof Person){ this.name name; this.age age; this.job job; }else{ return new Person(name, age, job); }}var klaus1 Person(Klaus, 22, developer);var klaus2 new Person(Klaus, 22, developer); //两种方法结果一样不过个人认为这种没什么必要构造函数已经首字母大写来加以区分了如果还错误调用的话那也没啥好说的了。。。结语以上就是我眼中的 JavaScript 原型可能解释的不够清楚大家如果还想看更详细的内容可以去看高程三的第六章或者你不知道的 JavaScript上卷的第二部分关于原型的内容下一次我可能会写一些关于 JavaScript 继承的内容。
