发表于: 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)里去找这个属性.
评论