js原型和原型链理解

JS原型与原型链解析
本文深入探讨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)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值