函数原型构造函数安全类构造函数继承原型式继承组合式继承寄生式继承寄生组合式继承内置构造函数

超、凢脫俗 2021-09-02 07:05 452阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70][]

### **构造函数执行的四步** ###

<table style="width:521.1pt;"> 
 <tbody> 
  <tr> 
   <td style="width:521.1pt;"> <p>构造函数执行时候的四个步骤:</p> <p>&nbsp;-在函数内部，开辟一个新的空间</p> <p>&nbsp;-改变this指向 (指向创建的对象)</p> <p>&nbsp;-执行函数中的代码， 为this赋值</p> <p>&nbsp;-返回创建的实例化对象</p> </td> 
  </tr> 
 </tbody> 
</table>

因此， 我们可以通过this.xx进行赋值

prototype是每一个函数天生可以调用的，它的值是一个对象

该属性对普通函数没有作用

对与构造函数来说，每创建出来的对象都会有一个隐含的属性

它的指向构造函数的prototype属性，我们可以通过getprototype或者\_prototype\_来访问

当一个对象去调用一些属性或者方法的时候，首先从自身查找，如果找到直接使用

原型链:   如果自身没有，往原型查找，如果有就直接使用 直到找到重点object.prototypr   如果没有返回null

原型就像一个公共区域，原型中的所有内容，都可以被实例化对象所访问到

所有以后再创建构造函数的时候，我们可以把对象方法在原型对象中

每次就不需要为每个方法对象添加属性和方法，还不会影响到全局作用域，就可以使每个对象共享

function People(name,age,sex)｛
       this.name=name;
       this.age = age;
       this.sex = sex;
    
    ｝
    
      //下面还可以写多个方法  通过原型.prototype方法调取
        People.prototype.sayHello = function() {
    	console.log("大家好, 我的名字叫做" + this.name + ",我的年龄是" + this.age + ",我是一个" + this.sex + "孩子");
    }
    
    // 实例化对象
    var xiaoming = new People("小明", 12, "男");
    var xiaohong = new People("小红", 11, "女");
    
    //调取原型中的方法
    xiaoming.sayHello();
    xiaohong.sayHello();

### **hasOwnProperty  ** 该方法是用于检测对象中是否含有指定的属性 ###

// 添加属性
    People.prototype.title = "nihao";
    
    
    // 实例化对象
    var xiaoming = new People("小明", 12, "男");
    
    // 该方法是用于检测对象中是否含有指定的属性
    console.log(xiaoming.hasOwnProperty("title"));
    
    
    结果为true

### 安全类:  window     object指向window ###

![20200908165236131.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1][]

### 原型式继承    子类的原型指向父类父类的实例 ###

但是通过构造函数式继承会丢失    所以要人工补回constructor属性

补回的constructor这条代码一定要写在类式继承的下面去， 并且所添加的每一个方法都要写在类式继承的下面

**组合式继承的方法**：就是把原型式继承与构造函数式继承结合起来 改变子类的this  子类的原型指向父类父类的实例   补回constructor属性

// 定义父类
    	function People(name, age, sex) {
    		this.name = name;
    		this.age = age;
    		this.sex = sex;
    	}
    
    	// 方法写在原型中 
    	People.prototype.sayHello = function() {
    		console.log("你好，朋友");
    	}
    
    
    
    	// 定义子类
    	function Student(name, age, sex, grade) {
    		this.name = name;
    		this.age = age;
    		this.sex = sex;
    		this.grade = grade;
    	}
    
    	// 现在我们不能让子类的原型指向父类的原型了
    	// 但是我们迫切希望有一种方式，即可以在子类的原型中添加方法不去影响父类， 还可以访问到父类中原型的方法，经过观察，父类的实例符合条件  
            
            //方式一
    	Student.prototype = new People();
    
            //在es5中提供了Object.create()方法 方式二
           // Student.prototype=object.create(people.prootype)
    
    
            // 把原来的原型对象丢弃了，所以要人工补回constructor属性
    	Student.prototype.constructor = Student;
    
    
    
    
    	// 给子类的原型中添加方法
    	Student.prototype.say = function() {
    		console.log("你好, 世界");
    	}
    
    
    	// 实例化对象
    	var p = new People("老明", 35, "男");
    	var s = new Student("小明", 12, "男", 6);
    
    	s.sayHello();    //可以获取到父类的方法
    	s.say();         //子类也可以获取自己的方法        
    	// p.say();      //报错 父类不能获取到子类的方法
     
    	// 检测s是否是Student的实例
    	console.log(s instanceof Student);   //true
    
    	// 检测s是否是People的实例
    	console.log(s instanceof People);   //true
    
    	// 结论: 想要继承父类中的方法， 要使用类式继承 （原型式继承）， 是将子类的原型指向父类的实例

###  构造函数式继承    通过改变父类this的指向 ###

// 在之前我们将的是继承父类原型中的内容， 叫做类式继承
    	// 现在讲如何继承父类中的属性
    
    	// // 定义父类
    	function People(name, age, sex) {
    		this.name = name;
    		this.age = age;
    		this.sex = sex;
    	}
    
    	// 定义子类
    	function Student(name, age, sex, grade) {
    		// 将类数组转为数组
    		// var arr = [].slice.call(arguments);
    	
    		// 使用构造函数式继承
    		People.apply(this, arguments);
    
                   //这里要把父类的没有的属性添加上
    		this.grade = grade;
    	}
    
    	var s = new Student("小明", 12, "男", 6);
    
    	// 检测s是否是People的实例化对象
    	console.log(s instanceof People);   //true

### 寄生式继承  ###

**定义一个寄生函数， 接收两个参数， 第一个参数是父类， 第二个参数是子类**

定义一个新的构造函数

将该构造函数的原型指向父类的原型

将新的构造函数的实例交给子类的原型

补回constructor属性

返回子类

### 寄生式组合式继承     通过改变父类this的指向 ###

// 寄生组合式继承: 在定义类的时候 使用构造函数式继承即可
    	function People(name, age, sex) {
    		this.name = name;
    		this.age = age;
    		this.sex = sex;
    	}
    
    	// 方法写在原型中 
    	People.prototype.sayHello = function() {
    		console.log("你好，朋友");
    	}
    
    	// 定义子类
    	function Student(name, age, sex, grade) {
    		// 使用构造函数式继承
    		People.apply(this, arguments);
    		this.grade = grade;
    	}
    
    
    
    	// 寄生式继承
    	// 定义一个寄生函数， 接收两个参数， 第一个参数是父类， 第二个参数是子类
    	function jisheng(fahter, child) {
    
    		// 使用类式继承，子类的原型就是父类的实例，在子类的原型中会多出很多个无用的属性
    		// 定义一个新的构造函数
    		var F = function() {
    
    		};
    		// 将该构造函数的原型指向父类的原型
    		F.prototype = fahter.prototype;
    
    		// 将F的实例交给子类的原型
    		child.prototype = new F();
    
    		// 补回constructor属性
    		child.prototype.constructor = child;
    		// 返回子类
    		return child;
    	}
    
    	// 执行jisheng函数
    	jisheng(People, Student);
    
    	// 实例化对象
    	var s = new Student("小明", 12, "男", 6);
    	s.sayHello();

### 内置构造函数 ###

ECMAScript核心语法支持的内置构造函数:

Object、Array、Function、String、Number、Boolean、Date、RegExp、 Error

**Function**

使用方式：

除了最后一个参数是函数体，其它的都是形参

var fun = new Function("a", "b", "return a + b");
    var result = fun(1, 2);
    
    
    等价方式1
    var fun = function(a, b) {
        return a + b;
    }
    
    
    等价方式2
    function fun(a, b) {
       return a + b;
    }

![20200908180701612.png][]

特点: 当创建函数的时候使用的是new Function得到的函数名称是anonymous

而通过函数表达式或者是函数声明式通过函数.name得到的是函数名

额外

函数有一个length属性，是形参的个数

函数中有一个arguments.length, 函数执行的时候实参的个数

**RegExp**

该构造函数用于定义正则表达式

使用方式：

接收两个参数

第一个参数：正则表达式的表达体

第二个参数：正则表达式的修饰符 i, g, m

// 该构造函数用于定义正则表达式  推荐
    var reg = /^\s+$/g;
    
    //注意: 由于字符串中也有转义字符，所以要多转义一次
    var reg1 = new RegExp("^\\s+$", "g");

**String**

var str = "abcdefg";   //推荐
    
    var str_obj = new String(str);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 2][]

**Boolean**

var f = false;
    
    var f_obj = new Boolean(f);

![20200908181238955.png][]

** Number**

var num = "3a";
    // var num_obj = new Number(num);
    
    // Number本身不是一个安全类，当Number自执行的时候，是作为类型转换函数来使用了
    var num1 = Number(num);

![20200908181313945.png][]

### 内置构造函数相互之间的关系 ###

// 所有的对象都是Object的实例
    	// 所有的函数都是Function的实例
    	// 函数也是对象   对象不是函数
    
    	// 定义对象
    	var obj = {};
    	console.log(obj instanceof Object); // true
    
    	console.log([].constructor instanceof Object); // true
    
    	console.log([].constructor.constructor instanceof Object); // true
    
    	console.log(Object instanceof Object); // true
    
    	console.log(Object instanceof Function); // true
    
    	console.log(Function instanceof Function); // true
    
    	console.log(obj instanceof Function); // false

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70]: /images/20210813/26351eaf436d4b1facb7481f270bf006.png
[20200908165236131.png]: /images/20210813/c3c920cd7ec0410aa035c9d99693c3c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1]: /images/20210813/3c77e29d99d842358d6ca59efeebef09.png
[20200908180701612.png]: /images/20210813/4fbeb8ed987b4838b4f12d366064540c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 2]: /images/20210813/6c3bbbf961f44c2d852ba74adc605321.png
[20200908181238955.png]: /images/20210813/605cb711987b41d6a3c810631766e99c.png
[20200908181313945.png]: /images/20210813/243ac71b7aa04a6eb11cf819d32bee57.png