原型链类原理

最新推荐文章于 2020-10-24 21:31:44 发布

weixin_34106122

最新推荐文章于 2020-10-24 21:31:44 发布

阅读量155

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000013590106

版权

原型链类

`javascript`

1. 创建对象有几种方法

默认这个对象的原型链指向 Object

var o1 = {name:'o1'}; // 字面量
var o11 = new Object({name:'o11'}); //new Object

使用显示的构造函数来创建对象

var M = function(){this.name='o2'};
var o2 = new M();

使用显示的构造函数来创建对象

var p = {name:'p'};
var o4 = Object.create(p);
把参数中的这个对象作为一个新对象的原型对象赋于 o4，只能通过原型链来找 name 属性

2. 原型、构造函数、实例、原型链

实例：o1、o11、M、o2、p、o4
构造函数：被 new 使用的函数
构造函数使用 new 运算符生成实例
构造函数通过 prototype 属性初始化一个对象，即原型对象
原型对象如何区分被哪个构造函数所引用，通过原型对象的构造器 constructor 来指向生成的函数
原型链：从一个实例往上找构造这个实例相关联的对象，这个关联的对象再往上找，它又有创造它的上一级的原型对象，以此类推，直到
objrct.prototype 原型终止。主要通过 prototype 和 __proto__ 实例

此处输入图片的描述

instanceof 的原理

判断实例对象的 __proto__ 与构造函数的 prototype 是不是同一个引用，只要在这条原型链的构造函数都是这个实例对象的构造函数
用 constructor 比用 instanceof 更加严谨

此处输入图片的描述
new 运算符

一个新对象被创建，它继承自 foo.prototype
构造函数被执行。执行的时候，相应的参数会被传入，同时上下文「this」会被指定为这个新实例。new foo 等同于 new
foo(),只能用在不传递任何参数的情况。
如果构造函数返回了一个「对象」，那么这个对象会取代整个 new 出来的结果。如果构造函数没有返回对象，那么 new 出来的结果为步骤1的对象。

实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>原型链</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
    <script type="text/javascript">
        // 第一种方式：字面量
        var o1 = { name: 'o1' };
        var o2 = new Object({ name: 'o2' });
        // 第二种方式：通过构造函数创建
        var M = function (name) {
            this.name = name;
        }
        var o3 = new M('o3');
        // 第三种方式：Object.create
        var p = { name: 'p' };
        var o4 = Object.create(p);

        M.prototype.say = function () {
            console.log('say hi');
        }
        var o5 = new M('o5');

        // new运算符
        var new2 = function (func) { // 指定构造函数
            var o = Object.create(func.prototype);
            var k = func.call(o); // 转移上下文
            if (typeof k === 'object') { //是不是对象类型
                return k
            } else {
                return o
            }
        }

    </script>
</body>

</html>

License

可以拷贝、转发，但是必须提供原作者信息，同时也不能将本项目用于商业用途。

weixin_34106122

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原型链类原理

原型链类javascript1. 创建对象有几种方法默认这个对象的原型链指向 Objectvar o1 = {name:'o1'}; // 字面量var o11 = new Object({name:'o11'}); //new Object使用显示的构造函数来创建对象var M = function(){this.name...
复制链接

扫一扫