黑马程序员技术交流社区

标题: 【西安校区】javaScript面向对象编程之实例对象和new命令 [打印本页]
作者: 逆风TO    时间: 2020-1-14 17:29
标题: 【西安校区】javaScript面向对象编程之实例对象和new命令
1.实例对象
1.1 对象是什么？
面向对象编程（Object Oriented Programming，缩写为 OOP）是目前主流的编程范式。它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。

对象是单个实物的抽象表示
对象是一个容器，封装了属性和方法。属性是对象的状态，方法是对象的行为。
1.2 构造函数
javaScript使用构造函数（constructor）作为对象的模板。所谓”构造函数”，就是专门用来生成实例对象的函数。它就是对象的模板，描述实例对象的基本结构。

构造函数就是一个有自己特征和用法的“普通函数”。例如：
[AppleScript] 纯文本查看 复制代码
var Person = function(name.sex){

        this.name = name; // 姓名

        this.age =age; // 年龄

}

上面代码，Person就是一个构造函数，人都有姓名和年龄。为了把构造函数和普通函数进行区别，构造函数名字的首字母通常大写。

构造函数有两个特点：

函数体内部使用this关键字，代表要生成的实例。
生成对象的时候，必须使用new命令。
2 new命令
2.1 基本用法
new命令的作用就是执行构造函数，返回一个实例对象。
[Java] 纯文本查看 复制代码
var Car = function(){

        this.price = 1000;

}



var c = new Car();

c.price; // 1000

构造函数根据需要，可以接受参数。
[Java] 纯文本查看 复制代码
var Animal = function(type,sex){

        this.type = type; // 动物种类

        this.sex = sex; // 动物性别

}



var a = new Animal("哺乳动物",1);

a.type; // “哺乳动物”

a.sex; // 1，用1表示公，0表示母

new命令本身就可以执行构造函数，所以后面的构造函数可以带括号，也可以不带括号。
[Java] 纯文本查看 复制代码
/ 推荐写法

var c = new Car();



//不推荐写法

var c = new Car;

如果不使用new命令，直接调用构造函数，构造函数就变成了普通函数，并不会生成实例对象。
[Java] 纯文本查看 复制代码
var Car = function(){

        this.price = 1000;

}



// 不使用new命令，此此时this指向全局对象

var c = Car();

c; // underfined

c.price; // Uncaught TypeError: Cannot read property 'price' of undefined

price; // 1000

为了保证构造函数必须与new命令一起使用，可以通过以下手段实现：

[Java] 纯文本查看 复制代码
//使用严格模式

function Vehicle(speed,color){

        "use strict" // 第一行加上 “use strict”，开启严格模式

        this.speed = speed;

        this.color = color;

}

var v = Vehicle(100, "red"); // TypeError: Cannot set property 'speed' of undefined at Vehicle 





// 构造函数内部判断是否使用了new命令，没有直接返回一个实例对象

function Vehicle(speed,color){

        if(!(this instanceof Vehicle)){

                return new Vehicle(speed,color);

        }

        this.speed = speed;

        this.color = color;

}

2.2 new命令的原理
使用new命令时，它后面的函数依次执行下面的步骤：

创建一个空对象，作为将要返回的对象实例。
将这个空对象的原型，指向构造函数的prototype属性。
将这个空对象赋值给函数内部的this关键字。
开始执行构造函数内部的代码。
构造函数内部，this指的是一个新生成的空对象，所有针对this的操作，都会发生在这个空对象上。

如果构造函数内部有return语句，而且return后面跟着一个对象，new命令会返回return语句指定的对象；否则，就会不管return语句，返回this对象。
[Java] 纯文本查看 复制代码
// 构造函数内部返回一个对象

var Vehicle = function (){

  this.price = 1000;

  return { price: 2000 };

};

(new Vehicle()).price; // 2000



// 构造函数内部返回一个数值

var Vehicle = function () {

  this.price = 1000;

  return 2000;

};

new Vehicle().price; // 1000


对普通函数（内部没有this关键字）使用new命令，如果函数内部有return语句，且跟着一个对象，则返回return语句指定的对象；否则，返回空对象。
[Java] 纯文本查看 复制代码
// 普通函数返回一个对象

function getMessage() {

  return {'p':'this is a message'};

}

var msg = new getMessage();

msg // {p: "this is a message"}





// 普通函数返回一个字符串

function getMessage() {

  return 'this is a message';

}

var msg = new getMessage();

msg // {}

2.3 new.target
函数内部可以使用new.target属性。如果当前函数是new命令调用，new.target指向当前函数，否则为undefined。
[Java] 纯文本查看 复制代码
function f() {

  console.log(new.target === f);

}

f() // false

new f() // true


3. 参考链接

本篇博文是我自己学习笔记，原文请参考阮一峰javaScript教程。
如有问题，请及时指出！







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2