发表于: 2019-06-16 23:28:16

1 821


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin) 
明天计划的事情:(一定要写非常细致的内容) 
遇到的问题:(遇到什么困难,怎么解决的) 
收获:(通过今天的学习,学到了什么知识)

原型链和访问对象原型的方法

(1)背景介绍:

面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法。</br>

JavaScript本身不提供类实现。 (在ES2015/ES6中引入了class关键字,但是只是语法糖,JavaScript 仍然是基于原型的)。

通过原型这种机制,JavaScript 中的对象从其他对象继承功能特性。

(2)知识剖析:

2.1prototype和__proto__

每个函数都有一个属性——prototype。这个prototype的属性值是一个对象(属性的集合),默认只有一个叫做constructor的属性,指向这个函数本身。

每个对象都有一个隐藏的属性——“__proto__”,这个属性引用了创建这个对象的函数的prototype。<br>即:fn.__proto__ === Fn.prototype

定义构造函数,通过new来创建对象实例

(3)常见问题:

访问对象原型的方法有哪些?

(4)解决方案:

没有正式的方法用于直接访问一个对象的原型对象——原型链中的“连接”被定义在一个内部属性中,在 JavaScript 语言标准中用 [[prototype]] 表示。

 然而,大多数现代浏览器还是提供了一个名为 __proto__ (前后各有2个下划线)的属性,其包含了对象的原型。你可以尝试输入 person1.__proto__ 和

person1.__proto__.__proto__,看看代码中的原型链是什么样的!获取实例对象obj的原型对象,有三种方法

1.obj.__proto__

2.obj.constructor.prototype

3. Object.getPrototypeOf(obj)

 上面三种方法之中,前两种都不是很可靠。

最新的ES6标准规定,__proto__属性只有浏览器才需要部署,其他环境可以不部署。而obj.constructor.prototype在手动改变原型对象时,可能会失效。

</p>

(5)编码实战:

function Dog (name){

this.name = name;

this.type = 'Dog';

}

Dog.prototype.speak = function () {

  alert('wang');

}

var doggie = new Dog('jiwawa');

console.log(doggie.name);  //jiwawa

doggie.speak();  //wang

在这个例子中,Dog就是一个构造函数,我们使用 new 创建了一个实例对象doggie。

构造函数,原型和实例的关系:

 1.每个构造函数(constructor)都有一个原型对象(prototype)

2.原型对象都包含一个指向构造函数的指针

3.实例都包含一个指向原型 对象的内部指针

4.如果试图引用对象的某个属性,会首先在对象内部寻找该属性,直至找不到,然后才在该对象的原型(prototype)里去找这个属性.



返回列表 返回列表
评论

    分享到