原型链

最新推荐文章于 2022-04-12 16:10:24 发布

weixin_33901843

最新推荐文章于 2022-04-12 16:10:24 发布

阅读量77

点赞数

文章标签： javascript ViewUI

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

版权

基本概念:

在js中，一切皆对象
每个对象都有一个指向它的原型的的内部链接(此链接还没有规范的访问方式，一般用__proro__代替),这个原型也有自己的原型，直到每个对象的原型为null为止
任意一个函数都可以作为构造器即var someFun = new AnyFun()
每个函数都有一个prototype属性，其它对象没有，该属性也是一个对象，该对象有一个constructor属性指向该函数
使用new去实例化一个函数后，得到的是一个对象。该函数的实例的原型指向构造函数的prototype属性

API
1.instanceof,判断对象是否是构造函数的实例
2.getPrototypeOf()

函数对象和普通对象
函数对象：通过new Function()，得到的对象，有_proto_和prototype两个属性
普通对象：通过非Function()函数new得的对象，有_proto_一个属性
总结：凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象。
图片描述

图片描述

面向对象思想写tab切换

a.定义构造函数,并确定实例拥有的属性
b.给原型添加行为,即方法
c.实例化对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象Tab切换</title>
    <style type="text/css">
        .tab-component .active {
            background-color: yellow;
        }
        .tab-component .show {
            display: block;
        }
        .tab-component div {
            display: none;
            width: 100px;
            height: 100px;
            border: 1px solid ;
            font-size: 36px;
        }
    </style>
</head>
<body>
    <div class="tab-component">
        <button class="active">1</button>
        <button>2</button>
        <button>3</button>
        <div class="show">div1</div>
        <div>div2</div>
        <div>div3</div>
    </div>
    <script type="text/javascript">
        var Tab = function() {
            //定义构造函数
        }

        Tab.prototype.tab = function() { //给原型添加方法
            var btns = document.querySelectorAll(".tab-component button");
            var blocks = document.querySelectorAll(".tab-component div");
            for(var i = 0, len = btns.length; i < len; i++) {
                (function(i) {
                    btns[i].onclick = function() {
                        for(var j = 0; j < len; j++) {
                            btns[j].classList.remove("active");
                            blocks[j].style.display = "none";
                        }
                        this.classList.add("active");
                        blocks[i].style.display = "block";
                    }
                }(i))
            }
        }

        new Tab().tab(); //实例化对象
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象TAB切换</title>
    <style type="text/css">
        .tab-component .active {
            color: #fff;
            background-color:red;
        }
        .tab-component .show {
            display: block;
        }
        .tab-component div {
            display: none;
            width: 100px;
            height: 100px;
            border:1px solid red;
            position: absolute;
            font-size: 26px;
        }
    </style>
</head>
<body>
    <div class="tab-component">
        <button class="active">1</button>
        <button>2</button>
        <button>3</button>
        <div class="show">1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <script type="text/javascript">
        //先定义构造函数
        var Tab = function() {
            this.tab(".tab-component");
        }
        //给原型添加方法
        Tab.prototype.tab = function(selector) {
            var btns = document.querySelector(selector).querySelectorAll("button");
            var blocks = document.querySelector(selector).querySelectorAll("div");
            for(var i =0, len = btns.length;i < len;i++) {
                (function(i){
                    btns[i].onclick = function() {
                        for(var j=0;j<len;j++) {
                            btns[j].classList.remove("active");
                            blocks[j].style.display = "none";
                        }
                        this.classList.add("active");
                        blocks[i].style.display = "block";
                    }
                }(i))
            }
        }
        //实例化对象
        new Tab();
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象TAB切换</title>
    <style type="text/css">
        .tab-component .active {
            color: #fff;
            background-color:red;
        }
        .tab-component .show {
            display: block;
        }
        .tab-component div {
            display: none;
            width: 100px;
            height: 100px;
            border:1px solid red;
            position: absolute;
            font-size: 26px;
        }
        .tab-component {
            margin-bottom: 300px;
        }
    </style>
</head>
<body>
    <div class="tab-component">
        <button class="active">1</button>
        <button>2</button>
        <button>3</button>
        <div class="show">1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="tab-component">
        <button class="active">1</button>
        <button>2</button>
        <button>3</button>
        <div class="show">1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <script type="text/javascript">
        //先定义构造函数
        var Tab = function(selector) {
            this.selector = selector;
            this.tab();
        }
        Tab.prototype.each = function() {
            
        }
        //给原型添加方法
        Tab.prototype.tab = function() {
            var selector = document.querySelectorAll(this.selector);
            for(var k = 0;k<selector.length;k++) {
                (function(k){
                    var btns = selector[k].querySelectorAll("button");
                    var blocks = selector[k].querySelectorAll("div");
                    for(var i =0, len = btns.length;i < len;i++) {
                    (function(i){
                        btns[i].onclick = function() {
                            for(var j=0;j<len;j++) {
                                btns[j].classList.remove("active");
                                blocks[j].style.display = "none";
                            }
                            this.classList.add("active");
                            blocks[i].style.display = "block";
                        }
                    }(i))
                }
                }(k))
            
            }    
        }
        //实例化对象
        new Tab(".tab-component");
    </script>
</body>
</html>

原型prototype、对象、构造函数
对象：属性跟方法的集合，属性是静态的数据，方法即行为，操作数据
构造函数：在函数的前面出现new关键字，js内置的构造函数，Date/Object/RegExp/String/Number/Boolean/Function
自定义构造函数：按照约定，首字母大写，跟普通函数区分
调用： new Person() 返回实例对象
var o = new Object();
Object.prototype === o.__proto__

原型prototype、对象、构造函数关系
对象是由构造函数创建，实例化的，字面量赋值，语法糖
对象的属性/方法的查找，a.先从自身查找，找到返回，b.找不到沿着原型链上查找，找到返回，找不到重复b步骤，直到顶级Object.prototype

构造函数、原型、实例三者之间的关系
构造函数：函数调用前存在关键字new的

a.定义，为了跟普通函数区分，按照约定首字母大写
b.调用时使用关键字new
c.返回值，创建出来的实例
d.内部的this，指向创建出来的实例

函数定义，必存在prototype属性，指向原型

原型：属性跟方法的集合，也是一个对象[__proto__]

实例：通过构造函数创建出来的对象必存在属性__proto__，指向原型，对象属性的查找，先从自身查找，找不到，沿着原型链从原型查找...
换句话说，对象的属性跟方法从原型上继承下来，对象的属性、方法可以重写