zoukankan      html  css  js  c++  java
  • 关于构造函数和原型的实验笔记

    关于构造函数,我想到一个比方。b 本是B生的,但是B断绝了和他的母子关系, A无子女,决定领养b,于是A就成了b的继母,也就是b法律上的妈妈。你问b的妈妈叫什么, 就相当于问b的构造函数是谁。这种关系很容易改变,立个什么字据或证明就可以了。 而原型就相当于是b身上的基因,这是领养这种关系改变不了的,属于先天得到的。 除非把它的基因都给改了,那时自然也就验出B是它的亲妈了。

    	//学校
    	function School (name) {
    		this.name = name;
    		this.teachers = [];
    		this.level = function(){
    			console.log('University')
    		}
    	}
    
    	//添加到原型上的属性
    	School.prototype.students = [];
    
    	//学校功能--介绍
    	School.prototype.show = function(){
    		console.log(this.name+':很棒的学校!')
    		this.teachers.forEach(function(teach){
    			console.log(this.name + '-' + teach);
    		})
    	}
    
    	//学校功能---招聘老师
    	School.prototype.recruit = function(name){
    		this.teachers.push(name);
    	}
    
    	//学校功能---招生
    	School.prototype.enroll = function(name){
    		this.students.push(name);
    	}
    
    	//通过构造函数的方式创建对象
    	var ts = new School('Tsinghua University');//此时School就是ts的构造函数
    	var bj = new School('Beijin University');//此时School就是bj的构造函数
    
        //通过构造函数创建的对象,注意两个问题
        //1 构造函数内的属性和方法是不被共享的
        //2 原型上的属性和方法是共享的
        ts.recruit('frog');  // frog 是ts这个学校的老师
        bj.recruit('Aaron'); // Aaron 是bj这个学校的老师
    
        ts.show(); // frog只出现在ts中
        bj.show(); //Aaron只出现在bj中
    
        //说明构造函数内声明的属性不被共享
        console.log(bj.teachers === ts.teachers); // false
        //说明构造函数内声明的方法不被共享
        console.log(bj.level === ts.level);//false;
    
        //说明teachers放在构造函数内是对的,各学校的老师互不影响
    
        ts.enroll('Tom'); //只给ts学校招生
        console.log(bj.students) //ts学校没有招生,也有这个学生了
    
        bj.enroll('Jek');
        console.log(ts.students) //bj学校招的学生,在ts也有
    
        //说明原型上的方法是共享的
        console.log(bj.enroll === ts.enroll) // true
        //说明原型上的属性是共享的
        console.log(bj.students === ts.students) // true;
    
        //小结: 方法尽量写在原型上,可以节省资源,引用类型的属性尽量写在构造函数内,避免污染;
    
        //构造函数的问题
        function A(){
        	this.name = 'A';
        }
    
        function B(){
        	this.name = 'B';
        }
    
        var a = new A;
        console.log(a.constructor===A) // true
    
        //用A的实例对象替换B的原型对象
        B.prototype = new A;
        var b = new B;
    
        console.log(b.constructor===B) // false
        console.log(b.constructor===A) // true
        //说明重写原型对象会产生构造函数指向的问题
        //修正构造函数为B
        B.prototype.constructor = B;
        console.log(b.constructor===B) //true
        //constructor是挂在prototype上的,重写prototype,也会自动改写constructor
    
        console.log(b.isPrototypeOf(B)) //false;
        console.log(Object.getPrototypeOf(b)) // A
        //修正contructor也改变不了prototype的引用关系
    
        //这种写法也会产生B的构造函数指向有问题
        B.prototype = {
        	//...
        }
    
        //推荐这样写
        A.prototype.getName = function(){
        	console.log(this.name);
        }
    
        function C(){
        	this.name = 'C';
        }
        C.prototype.getAge= function(){
        	console.log('c age 18')
        }
    
        var c = new C;
        //只改变构造函数
        C.prototype.constructor = A;
        console.log(Object.getPrototypeOf(c)) // A
        console.log(c.isPrototypeOf(C)) // false
    	console.log(c.isPrototypeOf(A)) // false
    	console.log(c) //C;
    	//c.getName(); // undefined
    	c.getAge(); //c age 18
    
        //小结: 只要改变了对象的原型,那么它的造函数就会自动改变,
        //只改变构造函数的指向,原型的判断不准确了,但是没有被改写。
    
       
    

      

  • 相关阅读:
    Linux下链接mysql数据库的命令
    linux cp命令参数及用法详解
    svn命令在linux下的使用
    把一个一维数组转换为in ()
    JS修改标签中的文本且不影响其中标签
    Underscore template
    JavaScript动态加载js文件
    JavaScript库基本格式写法
    JavaScript class 使用
    Uncaught TypeError: Cannot read property 'ownerDocument' of null
  • 原文地址:https://www.cnblogs.com/afrog/p/4078429.html
Copyright © 2011-2022 走看看