es3 - 9.构造函数及实例化原理、包装类 - 《JavaScript》

(1) 构造函数及实例化原理
2. 构造函数实例化过程
引js构造函数的定义
构造函数的定义
3.包装类
课后习题
- 写一个函数,接收任意一个字符串,算出这个字符串的总字节数

(1) 构造函数及实例化原理

1. this
this 没有执行讨论 this没有意义
this 在函数执行的时候指向 window
没有实例化的时候指向window
当实例化的时候 this指向被实例化出来的对象

2. 构造函数实例化过程

// 1)当构造函数被实例化的时候，相当于函数被执行了，会产生AO,会自动先保存一个this对
象(不是空对象)
// 2)new 的时候相当于函数跑完了, function Car(color,brand){ // this = { // //因为this指向实例，所以在外界可以通过实例进行访问，访问到this中的的属性 // color:color, // brand:brand // } // 3) 在 this中保存了this相对应的的属性 this.color = color; this.brand = brand; // 构造函数实例化的时候隐式的返回一个引用值，this指向被实例化出来的对象 //return this }

    function Car(opt) {
        this.name = opt.carname;
        this.carcolor = opt.carcolor;
    }
    var test = new Car({
        carname:'baoma',
        carcolor:'black'
    })

引js构造函数的定义

https://www.jianshu.com/p/7e21e23ffba9

构造函数的定义

1、什么是构造函数

在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。构造函数首字母一般大写

2、为什么要使用构造函数？

举个例子，我们要录入一年级一班中每一位同学的个人信息，那么我们可以创建一些对象，比如：

var p1 = { name: 'zs', age: 6, gender: '男', hobby: 'basketball' };
var p2 = { name: 'ls', age: 6, gender: '女', hobby: 'dancing' };
var p3 = { name: 'ww', age: 6, gender: '女', hobby: 'singing' };
var p4 = { name: 'zl', age: 6, gender: '男', hobby: 'football' };

像上面这样，我们可以把每一位同学的信息当做一个对象来处理。但是，我们会发现，我们重复地写了很多无意义的代码。比如 name、age、gender、hobby 。如果这个班上有60个学生，我们得重复写60遍。
这个时候，构造函数的优势就体现出来了。我们发现，虽然每位同学都有 name、gender、hobby这些属性，但它们都是不同的，那我们就把这些属性当做构造函数的参数传递进去。而由于都是一年级的学生，age 基本都是6岁，所以我们就可以写死，遇到特殊情况再单独做处理即可。此时，我们就可以创建以下的函数：

var p1 = new Person('zs', '男', 'basketball');
var p2 = new Person('ls', '女', 'dancing');
var p3 = new Person('ww', '女', 'singing');
var p4 = new Person('zl', '男', 'football');

此时你会发现，创建对象会变得非常方便。所以，虽然封装构造函数的过程会比较麻烦，但一旦封装成功，我们再创建对象就会变得非常轻松，这也是我们为什么要使用构造函数的原因。
在使用对象字面量创建一系列同一类型的对象时，这些对象可能具有一些相似的特征(属性)和行为(方法)，此时会产生很多重复的代码，而使用构造函数就可以实现代码复用。

3、构造函数的执行过程

先说一点基本概念。

function Animal(color) {
 this.color = color;
}

当一个函数创建好以后，我们并不知道它是不是构造函数，即使像上面的例子一样，函数名为大写，我们也不能确定。只有当一个函数以 new 关键字来调用的时候，我们才能说它是一个构造函数。就像下面这样：

var dog = new Animal("black");

以下我们只讨论构造函数的执行过程，也就是以 new 关键字来调用的情况。
我们还是以上面的 Person 为例。
以上就是构造函数的整个执行过程。

4、构造函数的返回值

构造函数执行过程的最后一步是默认返回 this 。言外之意，构造函数的返回值还有其它情况。下面我们就来聊聊关于构造函数返回值的问题。

(1) 没有手动添加返回值，默认返回 this

function Person1() {
 this.name = 'zhangsan';
}

var p1 = new Person1();

按照上面讲的，我们复习一遍。首先，当用 new 关键字调用时，产生一个新的内存空间 #f11，并标记为 Person1 的实例；接着，函数体内部的 this 指向该内存空间 #f11；执行函数体内部的代码；由于函数体内部的this 指向该内存空间，而该内存空间又被变量 p1 所接收，所以 p1 中就会有一个 name 属性，属性值为 ‘zhangsan’。

p1: {
 name: 'zhangsan'
}

(2) 手动添加一个基本数据类型的返回值，最终还是返回 this

function Person2() {
 this.age = 28;
 return 50;
}
var p2 = new Person2();
console.log(p2.age);   // 28
p2: {
 age: 28
}

如果上面是一个普通函数的调用，那么返回值就是 50。

(3) 手动添加一个复杂数据类型(对象)的返回值，最终返回该对象 (返回引用型数据会改变返回值)

直接上例子

function Person3() {
 this.height = '180';
 return ['a', 'b', 'c'];
}
var p3 = new Person3();
console.log(p3.height);  // undefined
console.log(p3.length);  // 3
console.log(p3[0]);      // 'a'

再来一个例子

function Person4() {
  this.gender = '男';
  return { gender: '中性' };
}
var p4 = new Person4();
console.log(p4.gender);  // '中性'

(4)构造函数首字母必须大写吗？

大小写都可以

(5)不用new关键字，直接运行构造函数，是否会出错？如果不会出错，那么，用new和不用new调用构造函数，有什么区别？

使用new操作符调用函数
例子：

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}
var person1 = new Person('nicole');
person1.say(); // "I am nicole"

用new调用构造函数，函数内部会发生如下变化：
创建一个this变量，该变量指向一个空对象。并且该对象继承函数的原型；
属性和方法被加入到this引用的对象中；
隐式返回this对象（如果没有显性返回其他对象(引用型数据)）
用伪程序来展示上述变化：

function Person(name){
  // 创建this变量，指向空对象
  var this = {}; 
  // 属性和方法被加入到this引用的对象中
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
  // 返回this对象
  return this;
}

可以看出，用new调用构造函数，最大特点为，this对象指向构造函数生成的对象，所以，person1.say()会返回字符串： “I am nicole”。
小贴士
如果指定了返回对象，那么，this对象可能被丢失。

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
  var that = {};
  that.name = "It is that!";
  return that;
}
var person1 = new Person('nicole');
person1.name; // "It is that!"

直接调用函数
如果直接调用函数，那么，this对象指向window，并且，不会默认返回任何对象（除非显性声明返回值）。
还是拿Person函数为例，直接调用Person函数：

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}
var person1 = Person('nicole');
person1; //  undefined
window.name; // nicole

可见，直接调用构造函数的结果，并不是我们想要的。

5.小结

为了防止因为忘记使用new关键字而调用构造函数，可以加一些判断条件强行调用new关键字，代码如下：

function Person(name){
  if (!(this instanceof Person)) {
    return new Person(name);
  }
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}
var person1 = Person('nicole');
console.log(person1.say()); // I am nicole
var person2 = new Person('lisa');
console.log(person2.say()); // I am lisa

3.包装类

原始值(string, number, null ,undefined,boolean)没有自己的方法和属性
```js
var a = 123;//原始值
a.len = 3;
//包装类的步骤
//1.new Number(123).len = 3 ;// 将数值通过new Number 转换成数字对象，给这个对象创建一
个len属性赋值为 3
//2.delete new Number(123).len;//
console.log(a.len);//undefined
// 内置的三种构造函数
new Number() //转换成数字对象
new String() //转换成字符串对象
new Boolean()//转换成布尔对象
课后习题
写一个函数,接收任意一个字符串,算出这个字符串的总字节数
构造函数写法
```javascript function Asc() {
```
 var sum = 0;
 this.say = function (strVal) {
     for(var i=0;i<strVal.length;i++){
         var item = strVal.charCodeAt(i);
         if(item>=0&&item<=255){
             sum+=1;
         }else{
             sum+=2;
         }
     }
     // return sum;
     console.log(sum);
 }
```
}

**构造函数写法 函数内部 不用自己定义对象 也不用return  **<br />**因为系统默认定义一个 var this ={} 默认返回 this对象 直接this.方法 = fun(){} 即可**

<a name="XKbF0"></a>
####  普通函数写法
```javascript
    function Ascfn(val) {
        var sum = 0;
        for(var i = 0;i<val.length;i++){
            var item = val.charCodeAt(i);
            if(item>=0&&item<=255){
                sum+=1;
            }else{
                sum+=2;
            }
        }
        console.log(sum);
        // return sum; 
    }
    Ascfn('123abc~');

函数的写法直接调用函数并传值即可

闭包写法

    function bAsc() {
        var sum = 0;
        var ascFn = {
            char: function (val) {
                for (var i = 0; i < val.length; i++) {
                    var item = val.charCodeAt(i);
                    if (item >= 0 && item <= 255) {
                        sum += 1;
                    } else {
                        sum += 2;
                    }
                }
                // return sum;
                console.log(sum);
            }
        }
        return ascFn;
    }
    var test = bAsc();
    test.char('123abs');

优化算法判断

        function getBytes(str) {
          var bytes = str.length;
          for(var i = 0;i<str.length;i++){
            pos = str.charCodeAt(i);
            if(pos>255){
              bytes++;
            }
          }
          return bytes;
        }
        console.log(getBytes('你好！世界123abc'));
        //算法 先用str.length统计出字符串长度 然后 判断中文 这些Asc表之外的字符;

// 闭包写法一般会返回一个对象或者对象或者方法若是返回对象则在对象的内部写一个方法(属性值是函数)
// 在外面调用这个方法若要在调用的函数方法里传参则直接在方法里写形参在外部调用时传实参即可;

9.构造函数及实例化原理、包装类