前端---JavaScript基础3

偏执的太偏执、 2022-10-11 13:45 12阅读 0赞

### 文章目录 ###

*   *  前端---JavaScript基础3
     *   *  普通对象与函数对象
         *  原型及属性判断
         *  构造函数继承
         *  原型继承
         *  组合继承
         *  寄生组合式继承

## 前端—JavaScript基础3 ##

### 普通对象与函数对象 ###

### 原型及属性判断 ###

### 构造函数继承 ###

### 原型继承 ###

### 组合继承 ###

### 寄生组合式继承 ###

//原型是一个对象，其他对象可以通过它实现属性继承
    //prototype是函数对象才有的属性
    //什么是普通对象？ 函数对象？
    //函数
    function f() { }
    console.log(typeof f,f.prototype)
    var ff = new f()
    console.log(typeof ff,ff.prototype)
    
    //普通对象
    var o = { }
    console.log(typeof o,o.prototype)
    
    
    //什么是原型？ prototype
    //具体原型写法
    function Person(){ }; //定义一个函数对象
    Person.prototype.name = "jack"; //原型中添加属性
    Person.prototype.age= 22;
    var p1 = new Person(); //实例化
    var p2 = new Person();
    console.log(p1.name)
    
    //总结：
    //1.每一个函数对象都有一个prototype属性，但是普通对象没有；prototype下面又有constructor，指向这个函数；
    //2.每一个对象都有一个_proto_内部属性，指向它所对应的构造函数的原型对象；

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]

老家比喻原型：（如下图）  
![老家比喻原型][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]

//原型有什么用？ 可以实现特性：继承
    //生成多个实例 缺点：代码量大，不好组织
    var cat1 = { }
    cat1.name = "大白"
    var cat2 = { }
    cat2.name = "小白"
    
    //工厂创建多个对象 缺点：不能够确定类型
    function cat(name){ 
    	return { 
    		name:name
    	}
    }
    var cat1 = cat("大白")
    var cat2 = cat("小白")
    console.log(cat1 instanceof cat)  //false
    
    //构造函数 缺点：存在方法的重复 代码冗余
    function Cat(name){ 
    	this.name = name;
    	this.say(){ 
    		console.log(this.name)
    	}
    }
    var cat1 =new Cat("大白")
    var cat2 =new Cat("小白")
    console.log(cat1 instanceof Cat)  //true
    
    //原型优化 把方法移入到原型中，减少实例的代码
    function Cat(name){ 
    	this.name = name;
    }
    Cat.prototype.say = function(){ 
    	console.log(this.name)
    }
    var cat1 =new Cat("大白")
    var cat2 =new Cat("小白")
    cat1.say()
    console.log(cat1 instanceof Cat)  //true
    
    //属性检测 是在对象实例中，还是在原型中
    console.log('name' in cat1) //会在原型和实例中找
    console.log(cat1.hasOwnProperty('name')) //只会在实例中找
    
    
    
    //原型应用 继承
    function Animal(){ 
    	this.type = '动物';
    }
    function Cat(name){ 
    	this.name= name;
    }
    Cat.prototype = new Animal();
    var cat1 = new Cat("小绿");
    console.log(cat1.name,cat1.type) 
    
    //构造器 继承
    function Animal(){ 
    	this.type = '动物';
    }
    function Cat(name){ 
    	//Animal.apply(this); //调用Animal构造器 this==Cat
    	Animal.call(this);  //区别（传递参数）：Animal.call(this,xx,yy); Animal.apply(this,[xx,yy]); 
    	this.name= name;
    }
    var cat1 = new Cat("大绿");
    console.log(cat1.type) 
    
    
    //组合继承（原型+构造器） 缺点：调用两次父类构造器
    function Person(name){ 
    	thos.proLans = ["php","java"];
    	this,name = name;
    }
    Person.prototype.showName = function(){ 
    	console.log(this.name)
    }
    function Teacher(name,course){ 
    	Person.call(this,name);
    	this.course = course;
    }
    Teacher.prototype = new Person();
    var t1 = new Teacher("aaa","语文");
    console.log(t1.course,t1.name,t1.proLans)
    t1.showName();
    
    
    //原型+构造+寄生
    function Person(name){ 
    	thos.proLans = ["php","java"];
    	this,name = name;
    }
    Person.prototype.showName = function(){ 
    	console.log(this.name)
    }
    function Teacher(name,course){ 
    	Person.call(this,name);
    	this.course = course;
    }
    function extends(subObj,superObj){ 
    	//创建一个空对象，将空对象的原型指向superObj的原型
    	var proObj = Object.create(superObj.prototype); //proObj == 空对象
    	//proObj.constructor = subObj; //手动将constructor指向构造器
    	subObj.prototype = proObj;  // subObj == Teacher
    }
    extends(Teacher,Person);
    var t1 = new Teacher("小侯","数学");
    console.log(t1.course,t1.name,t1.proLans)
    t1.showName();

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 4]  
create函数：

function create(o){ 
    	var f = function(){ };
    	f.prototype = o;
    	return new f();
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20221005/7559003750ad4b71a4915fed2e8f1572.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/a12d673460094b9ebbabbdefd053a947.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/f94d4b61c3274fd99539bae4ef4b2cc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/423d573c12084bf29baf0a0b920c196f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 4]: /images/20221005/ca33c62e384e4beeb229ce2eb83c7028.png