原型

 

 

 

原型对象：

1（prototype存在于构造函数中，其实任意函数都有，我们不关注而已）函数都有protoType属性，这个属性是一个指针， 指向 即原型对象。

2 js是一种基于原型的语言，每个对象拥有一个原型对象，对象以其原型为模板，从原型继承方法和属性。原型对象也可能有原型，以此类推，原型链。

注意： 原型链中的方法和属性没有被复制到其他对象，它们被访问需要通过原形链。

注意：没有官方的方法直接访问原形对象。

注意：prototype属性，继承成员被定义的地方。继承的属性和方法是定义在prototype属性上的，prototype属性的值是一个对象，我们希望被原型链下游的对象继承的属性和方法，都存储其中。

原型链：当对象使用属性的时候，现在自身进行查找，有就直接使用，没有就沿着__proto__这条链继续往下查找，直到找到Object原型位置，有就返回相应的值，没有就返回underfined.

 

实现继承：

函数的原型对象constructor默认指向函数本身，原型对象除了有原型属性外，为了实现继承，还有一个原型链指针_proto_，该指针指向上一层的原型对象，而上一层的原型对象的结构依然类似，这样利用_proto_一直指向Object的原型对象上，而Object的原型对象用Object._proto_ = null表示原型链的最顶端，如此变形成了javascript的原型链继承。

 

• 原型对象中有两个默认的不可枚举属性：constructor和 __ proto__ ；constructor指向对象， __ proto__为隐式原型属性
• 原型分为两种，显式原型prototype和隐式原型__ proto__

 

 

function F() {} // F 是一个函数，函数也是对象，而且每个函数都有一个属性叫："prototype"

var o = new F(); // F.prototype 就是 o 的原型对象

console.log(o.name);

// 输出： undefined

F.prototype.name = "foo";

console.log(o.name);

// 输出： foo

// 上面这个例子是想说明：通过 new 在对象 o 与对象 F.prototype 之间建立了联系， 这个建立联系

// 的方式有人叫 "原型继承" 。 当访问的对象属性不存在时，就会沿着原型链去查找。

 

 

 

JS(原型和原型链）

题目1.如何准确判断一个变量是数组类型

使用 instanceof 方法

题目2.写一个原型链继承的例子

实例：封装 DOM 查询

定义构造函数 Elem,属性封装成 id 

 

打印出所有的 html

 

将所有的 html 变为 hello imooc ,并且点击弹出 ‘clicked’

链式操作

 

题目3.描述 new 一个对象的过程

 

1.创建一个新对象

2.this 指向这个新对象

3.执行代码，即对 this 赋值

4.返回 this

一、构造函数

大写字母开头一般都是构造函数

new 的过程：

1.var f = new Foo('zhangsan',20)  将参数传进去，函数中的 this 会变成空对象

2.this.name = name;this.age = age;this.class = 'class-1' 为赋值；return this 为实际的运行机制

3.return 之后赋值给 f ，f 具备了 f.name = zhangsan、f.age = 20、f.class = 'class-1'

4.继续执行到 f1 ,则 f1.name = lisi、f1.age = 22、f1.class = 'class-1'

二、构造函数（扩展）

1.var a = {} 其实是 var a = new Object()的语法糖  （a 的构造函数是 Object 函数）

2.var a = [] 其实是 var a = new Array()的语法糖    （a 的构造函数是 Array 函数）

3.function Foo(){...}其实是 var Foo = new Function(...)     （Foo 的构造函数是 Function 函数）

4.使用 instanceof 判断一个函数是否是一个变量的构造函数   (判断一个变量是否为“数组”  变量 instanceof Array)

三、原型规则

1.所有的引用类型（数组、对象、函数）都具有对象特性，即可自由扩展属性（除了“null”）

2.所有的引用类型（数组、对象、函数）都有一个 _proto_ 属性(隐式原型属性），属性值是一个普通的对象

3.所有的函数，都有一个 prototype(显式原型）属性，属性值也是一个普通的对象

4. 所有的引用类型（数组、对象、函数）， _proto_ 属性值(隐式原型属性）指向它的构造函数的“prototype”属性值

 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的_proto_(即它的构造函数的 prototype（显式原型）)中寻找

5.

f.printName() 中 f 的（自身）属性是 name ,属性值是 zhangsan

f.alertName() 中 f 的隐式原型正好指向 Foo 的显式原型 Foo.prototype, f 本身没有 alertName 的属性，会去其隐式原型中寻找，故执行f.alertName()时会执行Foo.prototype.alertName = function (),因为 Foo 扩展 function,故输出 zhangsan

故通过对象的属性的形式来执行函数的时候，无论函数是自身的属性还是从原型中得到的属性， this 永远指向 f 自身,没有指向函数，故执行f.alertName()时，alert(this.name) 中的 this 就是 f 。

6.循环对象自身的属性

 

if (f.hasOwnProperty(item)) 中遍历 f 时，判断遍历中的 item,是否可以通过 hasOwnProperty 验证，通过则表明它是 f 自身的属性，未通过则表明 是 f 通过原型获得的属性

 

 

 

四、原型链

 

f.toString(),当这个对象没有这个属性的时候，去它自身的隐式原型中找，它自身的隐式原型就是它构造函数（Foo）的显式原型（Foo.prototype）但显式原型（Foo.prototype）中并没有 toString ;但显式原型（Foo.prototype）也是对象，也要在它的隐式原型中找，即在其构造函数 （Object ）的显式原型中去找 toString. 故要在 f._proto_(隐式原型）的._proto_(隐式原型）中找，如图所示，故输出 null

 

方框为 构造函数，圆框为 对象，特例：Object.prototype 的 隐式原型是 null （JS避免死循环）

 五、instanceof

 判断 引用类型 属于哪个 构造函数 的方法

 

f instanceof FOO 的判断逻辑：f 是 Foo new出来的一个类型（正确）

判断方式：f 的隐式原型（proto）一层一层往上，能否对应到 Foo.prototype(显式原型）

 试判断：f instance of Object  (正确）见上图