js原型和原型链理解

最新推荐文章于 2025-02-17 15:28:17 发布

原创最新推荐文章于 2025-02-17 15:28:17 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

js 原生专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨JavaScript中原型和原型链的概念，解释了构造函数、原型对象和实例之间的关系，以及如何通过原型链实现继承和方法共享。通过具体代码示例，详细阐述了每个对象的proto属性和函数的prototype属性的作用，以及它们如何共同构成原型链。

补充原型知识点：
以这个代码为例延伸知识点：

 function Person() {}
 	Person.prototype.name = 'Zaxlct';
	 Person.prototype.age  = 28;
 	Person.prototype.job  = 'Software Engineer';
 	Person.prototype.sayName = function() {
   	alert(this.name);
 }
 var person1 = new Person();
 person1.sayName(); // 'Zaxlct'

 var person2 = new Person();
 person2.sayName(); // 'Zaxlct'

 console.log(person1.sayName == person2.sayName); //true

1、每个对象都有 proto 属性，但只有函数对象才有 prototype 属性
2、原型对象就是 Person.prototype，在默认情况下，所有的原型对象都会自动获得一个 constructor（构造函数）属性，这个属性（是一个指针）指向 prototype 属性所在的函数（Person），翻译一下就是（Person.prototype）有一个默认的constructor属性，这个属性是一个指针，指向Person这个函数，即：Person.prototype.constructor == Person
3、上例中person1和person2又是由Person实例化出的对象，而实例的构造函数的constructor属性也是指向Person函数，即：person1.constructor == Person
4、根据：
Person.prototype.constructor == Person
person1.constructor == Person。
结论：原型对象（Person.prototype）是构造函数（Person）的一个实例。
5、原型对象其实就是普通对象（但 Function.prototype 除外，它是函数对象，但它很特殊，他没有prototype属性（前面说道函数对象都有prototype属性））

 function Person(){};
  console.log(Person.prototype) //Person{}
  console.log(typeof Person.prototype) //Object
  console.log(typeof Function.prototype) // Function，这个特殊
  console.log(typeof Object.prototype) // Object
  console.log(typeof Function.prototype.prototype) //undefined

6、实例的构造函数属性（constructor）指向构造函数。
7、特例；console.log(typeof Function.prototype) 输出是function 也就是说Function.prototype是函数对象（第5点提到）。那么关于这个函数对象的有—>Function.prototype.proto === Object.prototype 和 Person.prototype.proto === Object.prototype，疑问的是：一个普通对象的构造函数是Object，那么第一个等式什么意思？
8、原型链的顶端是null—> Object.prototype.proto === null
9、自行解答问题：

 person1.__proto__ 是什么？
 Person.__proto__ 是什么？
 Person.prototype.__proto__ 是什么？
 Object.__proto__ 是什么？
 Object.prototype__proto__ 是什么？
     
 //例题
 function Person(){}
 var person1 = new Person();
 console.log(person1.__proto__ === Person.prototype); // true
 console.log(Person.prototype.__proto__ === Object.prototype) //true
 console.log(Object.prototype.__proto__) //null

 Person.__proto__ == Function.prototype; //true
 console.log(Function.prototype)// function(){} (空函数)

 var num = new Array()
 console.log(num.__proto__ == Array.prototype) // true
 console.log( Array.prototype.__proto__ == Object.prototype) // true
 console.log(Array.prototype) // [] (空数组)
 console.log(Object.prototype.__proto__) //null

 console.log(Array.__proto__ == Function.prototype)// true

题目：实现 (5).add(3).minus(2) 功能

Number.prototype.add = function(n) {
  return this.valueOf() + n;
};
Number.prototype.minus = function(n) {
  return this.valueOf() - n;
};
//这题就考了原型对象的使用，函数里面的this指向Number中原型对象的方法，add就是新添方法

附图理解：
在这里插入图片描述

废话不多说，附上一段大图滚动的简单原型使用的代码：

(function(exports) {
     function roll(obj) {
         this.$box = document.getElementById(obj.parID) || document.getElementById("wrap");
         this.$con = document.getElementById(obj.rollID) || document.getElementById('con');
         this.$imgs = this.$con.children;
         this.startVal = this.$box.scrollLeft;
         this.times = null; //计时器23        
           this.imgNum = 0;
         this.rollNum = obj.rollNum || 1;//滚动图片的个数，默认为1(只能是偶数)25        
           this.speed = obj.speed || 7;//滚动的速度，默认为726        
           this.width = obj.width || 400;//滚动的距离，默认为40027        
           this.stopTime = obj.stopTime || 2000;//停止的时间28        
           this.init();
     };
  roll.prototype = {
     constructor: "roll", //署名constructor属性的指向

     init: function() {
         var _this = this;
         setTimeout(function() {
             _this.imgSco();
         }, this.stopTime);
     },

     imgSco: function() {
         this.imgNum += this.rollNum;
         if (this.imgNum >= this.$imgs.length) {
             if (this.imgNum == this.$imgs.length - 1) {
                 this.imgNum++;
             } else {
                 this.imgNum = 0;
             }
         }
         this.startMove(this.imgNum * this.width);
     },

     startMove: function(moveL) {
         var _this = this;
         var moveL = moveL;
         this.times = setInterval(function() {
             _this.timeMove(moveL);
         }, 10); 
     },

     timeMove: function(moveL) {
         var _this = this;
         if (this.startVal < moveL) {
             this.startVal += this.speed;
             if (this.startVal >= moveL) {
                 this.startVal = moveL;
                 setTimeout(function() {
                   _this.imgSco(); 
                 }, this.stopTime);
                 clearInterval(this.times);
             }
         } else if (this.startVal > moveL) {
            this.startVal -= this.speed;
             if (this.startVal<= moveL) {
                 this.startVal = moveL;
                 setTimeout(function() {
                   _this.imgSco(); 
                 }, this.stopTime);
                 clearInterval(this.times);
             }
         }
         this.$box.scrollLeft = this.startVal;
     }
 }
 exports.roll = roll; })(window)