【JS基础】原型和原型链，构造函数

RobinTang 发布于2019-08-23 14:09 / 240人阅读

摘要：条原型规则所有的引用类型数组对象函数，都具有对象特性，即可自由扩展属性除了以外所有的引用类型数组对象函数，都有一个隐式原型属性，属性值是一个普通的对象所有的函数，都有一个显式原型属性，属性值也是一个普通的对象所有的引用类型数组对象函数，属性

5条原型规则

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

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

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

所有的引用类型（数组、对象、函数），__proto__ 属性值指向它的构造函数的 prototype 属性值

当试图得到一个对象（引用类型）的某个属性时，如果这个对象本身没有这个属性，那么会去它的 __proto__（即它的构造函数的 prototype）中寻找

var obj = {};
obj.a = 100;
var arr = [];
arr.a = 100;
function fn () {}
fn.a = 100;

console.log(obj.__proto__); // Object
console.log(arr.__proto__); // Array
console.log(fn.__proto__); // ƒ () { [native code] }

console.log(fn.prototype); // Object

console.log(obj.__proto__ === Object.prototype); // true

如何准确判断一个变量是数组类型？

var arr = [];
arr instanceof Array // true
typeof arr // object typeof无法判断是否是数组

一个原型链继承的例子

function Elem(id) {
    this.elem = document.getElementById(id);
}

Elem.prototype.html = function (val) {
    var elem = this.elem;
    if (val) {
        elem.innerHTML = val;
        return this; // 链式调用
    } else {
        return elem.innerHTML;
    }
};

Elem.prototype.on = function (type, fn) {
    var elem = this.elem;
    elem.addEventListener(type, fn);
    return this;
};

var div1 = new Elem("articleTitle");

console.log(div1.html());
div1.html("hello gril~");
div1.on("click", function () {
    alert("clicked!");
});

div1.html("hello gril~").on("click", function () {
    alert("clicked!");
}).html("Nice to meet you.
");

描述 new 一个对象的过程

创建一个新对象
this指向这个新对象
执行代码，即对this赋值
返回this

function Foo (name, age) {
    // 首先this变成空对象
    this.name = name;
    this.age = age;
    this.class = "class-1";
    // return this; // 默认有这一行
}
var f = new Foo("li", 20);
var f1 = new Foo("wang", 22); // 创建多个对象

构造函数

function Foo (name, age) {
    this.name = name;
}
Foo.prototype.getName = function () {
    console.log(this.name);
};
// 创建实例
var f = new Foo("can");
f.printName = function () {
    console.log(this.name);
};
// 测试
f.printName();
f.getName();
f.toString(); // 要去 f.__proto__.__proto__ 中查找

for (var key in f) {
    // 我们希望循环得到的是对象本身的属性，而不希望得到来自原型的属性
    // 高级浏览器已经在 for in 中屏蔽了来自原型的属性
    // 但是建议还是加上这个判断，保证程序的健壮性
    if (f.hasOwnProperty(key)) {
        console.log(key); // name printName
    }
}

instanceof 用于判断引用类型属于哪个构造函数的方法
f instanceof Foo 的判断逻辑是：f 的__proto__ 一层一层往上，是否对应到Foo.prototype，再试着判断 f instanceof Object

私有云专线服务 js原型链的继承原型原型链原型链原型链继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100174.html

JS基础-原型、原型链真的不能一知半解

摘要：原型链和对象的原型是对象实例和它的构造函数之间建立的链接，它的值是构造函数的。对象的原型根据上文提到的构造调用函数的时候会创建一个新对象，自动将的原型指向构造函数的对象。 showImg(https://segmentfault.com/img/remote/1460000020185197); JS的原型、原型链一直是比较难理解的内容，不少初学者甚至有一定经验的老鸟都不一定能完全说清...

changfeng1050 2019-08-26 11:00 评论0 收藏0
【前端基础进阶】JS原型、原型链、对象详解

摘要：二构造函数我们先复习一下构造函数的知识上面的例子中和都是的实例。这两个实例都有一个构造函数属性，该属性是一个指针指向。原型链其中是对象的实例。一. 普通对象与函数对象 JavaScript 中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象，Object 、Function 是 JS 自带的函数对象。下面举例说明 var o1 = {}; var o2 =new Objec...

explorer_ddf 2019-08-23 15:30 评论0 收藏0
【JS基础】原型对象的那些事（二）

摘要：只是构造函数上的一个属性，它是一个指针，指向原型对象，并不表示就是原型对象。在上一个例子中，就是一个对象，这个对象可以说是原生构造函数的实例，所以也是一个对象，所以它也有属性，不过它的指向也就是原型链的顶端，再往上就没有了。上一篇讲了①原型对象是什么；②__proto__、prototype、constructor的关系；③原型对象的作用；④原型对象带来的一些需要注意的问题；没理解...

yanbingyun1990 2019-08-21 16:23 评论0 收藏0
重温JS基础--继承

摘要：继承了如上，我们通过方法借调了超类的构造函数，实际上是在新创建的实力环境下调用了构造函数。组合继承组合继承的基本思想将原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式。继承方法在上面这个例子中，构造函数定义了两个属性和。在ECMAScript中只支持实现继承，而且实现继承主要是依靠原型链来实现的。 1. 什么是原型链继承基本思想：利用原型让一个引用类型继承另一个...

sixleaves 2019-08-21 17:21 评论0 收藏0
JS基础之数据类型、对象、原型、原型链、继承

摘要：就是通过调用构造函数而创建的那个对象实例的原型对象。构造函数模式可以创建自定义引用类型，可以像创建内置对象实例一样使用操作符。数据类型：简单数据类型：Undefined、Null、String、Number、Boolean、Symbol 复杂数据类型：Object // Undefined：声明，但未初始化 // Null：空对象指针 typeof操作符（检测基本数据类型）: ...

LucasTwilight 2019-08-26 11:53 评论0 收藏0
js基础（二）：构造函数与原型（看完必懂）

摘要：写在最前构造函数和原型模式的使用场景很广泛，但因为对概念的混淆不清导致无法熟练掌握。换句话说，不必在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型对象中，比如下面的方法。写在最前：构造函数和原型模式的使用场景很广泛，但因为对概念的混淆不清导致无法熟练掌握。切图带你从代码和流程图一步步攻克，纯干货，建议收藏详看，原型模式理解图非常重要，务必多看几遍！前往查看demo源...

BDEEFE 2019-08-23 16:42 评论0 收藏0