资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/javascript 面向对象 new 关键字 原型链 构造函数

javascript 面向对象 new 关键字 原型链 构造函数

wfc_666 / 1024人阅读

摘要：面向对象语言使用构造函数作为对象的模板。报错关键字命令内部实现接受个数不确定参数，第一个参数构造函数第二个到第个参数构造函数传递的参数。等价于获取构造函数返回数组第一个元素使用构造函数原型创建一个对象。

JavaScript面向对象
JavaScript 语言使用构造函数（constructor）作为对象的模板。所谓”构造函数”，就是专门用来生成实例对象的函数。它就是对象的模板，描述实例对象的基本结构。一个构造函数，可以生成多个实例对象，这些实例对象都有相同的结构

构造函数的首字母大写，区分一般函数。

函数体内部使用了this关键字，代表了所要生成的对象实例。

生成对象的时候，必须使用new命令。

构造函数内部使用严格模式 "use strict"，防止当做一般函数调用，这样就会报错。

function Person(name, age, sex) {
    "use strict";
    this.name = name;
    this.age = age;
    this.sex = sex;
}

Person() 报错
new Person("zhangxc", 29, "male");

1、new关键字 命令内部实现

function _new(constructor, params) { // 接受个数不确定参数，第一个参数：构造函数；第二个到第n个参数：构造函数传递的参数。
    // 1. 首先将参数组成一个数组 
    // 首先 .slice 这个方法在不接受任何参数的时候会返回 this 本身，这是一个 Array.prototype 下的方法，因此 this 就是指向调用 .slice 方法的数组本身。
    var args = Array.prototype.slice.call(arguments); // arguments伪数组，获取函数的所有参数的伪数组。
    // 等价于
    // [].slice.call(arguments);
    // 2. 获取构造函数
    var constructor = args.shift(); // shift()返回数组第一个元素
    // 3. 使用构造函数原型创建一个对象。我们希望以这个现有的对象作为模板，生成新的实例对象，这时就可以使用Object.create()方法。
    var context = Object.create(constructor.prototype); // Object.create()参数是一个对象，新建的对象继承参数对象的所有属性
    // 4. 将参数属性附加到对象上面
    var result = constructor.apply(context, args);
    // 5. 返回一个对象
    return (typeof result === "object" && result != null) ? result : context;
}

function Person(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
}

var args1 = _new(Person, "zhangxc", 18, "male");

// {name: "zhangxc", age: 18, sex: "male"}

var args2 = new Person("zhangxc", 18, "male");

// {name: "zhangxc", age: 18, sex: "male"}

new.target属性

如果当前函数是new命令调用，new.target指向当前函数(构造函数的名称)，否则为undefined。

function Test() {
  console.log(new.target === Test);
}

Test() // false
new Test() // true

2、this关键字
this总是指向调用该方法的对象，在最外面调用就指向window
bind, call, apply都可以改变this的指向

var name = "window";
var obj = {
    name: "object"
}
function fun() {
    console.log(this.name);
}

1、直接调用 fun() // window 
因为此时fun() this指向window对象

2、fun.call(obj);    // "object" 
call改变了this的指向，此时this指向obj对象，this.name 在obj对象里面取值，而不是window对象了。

详细讲解连接：https://github.com/mqyqingfen...

3、对象的继承
JavaScript 语言的继承不通过 class，而是通过“原型对象”（prototype）实现。

prototype原型对象

每一个函数都有一个原型对象

每一个实例对象都有一个 __proto__属性

JavaScript 继承机制的设计思想就是，原型对象的所有属性和方法，都能被实例对象共享。也就是说，如果属性和方法定义在原型上，那么所有实例对象就能共享，不仅节省了内存，还体现了实例对象之间的联系。原型对象的作用，就是定义所有实例对象共享的属性和方法。这也是它被称为原型对象的原因，而实例对象可以视作从原型对象衍生出来的子对象。

// 定义水果构造函数
function Fruit(name, color) {
    this.name = name;
    this.color = color;
}

// 实例化apple对象
var apple = new Fruit("apple", "red");

// 实例化banana 对象
var banana = new Fruit("banana", "yellow");

// 如果他们有共同的属性和方法那么就使用 prototype
// 修改 Fruit构造函数
Fruit.prototype.address = "china";
Fruit.prototype.eat = function() {
    console.log(this.name + "-----" + this.color);
}

apple.addess // china
banana.address // china

apple.eat()  // apple ---- red
banana.eat() // banana ---- yellow


function M1() {
  this.hello = "hello";
}

function M2() {
  this.world = "world";
}

**// 1、继承M1，M2自己的属性和方法(hasOwnProperty)**
function S() {
  M1.call(this);
  M2.call(this);
}

**// 2、继承M1原型链上的属性和方法**
S.prototype = Object.create(M1.prototype);
**// 3、继承M2原型链上的属性和方法**
Object.assign(S.prototype, M2.prototype);

// 指定构造函数
S.prototype.constructor = S;

var s = new S();
s.hello // "hello"
s.world // "world"

4、原型链
最透彻的原型链讲解 哈哈

**1. 每一个函数都有prototype属性指向他的原型对象**
**2. 每一个对象都有__proto__属性指向他的原型对象**

然后以Date()时间 构造函数为例讲解
证明：

var data = new Date();
因为：
data是一个实例对象所以他有__proto__属性指向他的原型对象
Date是一个构造函数所以他有prototype属性指向他的原型对象
所以：Date.prototype == data.__proto__    // Date{} true
data.__proto__是一个对象
因为：javascript规定所有对象都有原型
所以： data.__proto__.__proto__  == Object.prototype // true
这就是原型链了 data.__proto__.__proto__
data对象继承了 Date Object 原型对象的属性和方法。
云服务器 GPU云服务器 javascript 面向对象 javascript面向对象 javascript面向对象编程 javascript面向对象编程指南

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101634.html

相关文章

  • 面向对象的 JavaScript

    摘要：是完全的面向对象语言，它们通过类的形式组织函数和变量，使之不能脱离对象存在。而在基于原型的面向对象方式中，对象则是依靠构造器利用原型构造出来的。 JavaScript 函数式脚本语言特性以及其看似随意的编写风格，导致长期以来人们对这一门语言的误解，即认为 JavaScript 不是一门面向对象的语言，或者只是部分具备一些面向对象的特征。本文将回归面向对象本意，从对语言感悟的角度阐述为什...

    novo 评论0 收藏0

  • 面向对象的小九九

    摘要：由构造函数返回的对象就是表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤创建的对象。运算符返回一个布尔值，表示对象是否为某个构造函数的实例。 面向对象 本人能力有限，有误请斧正 本文旨在复习面向对象(不包含es6) 本文学习思维 创建对象的方式，获取对象属性 构造函数,构造函数的new 做了什么 原型与原型对象 原型链 继承(借用构造继承、原型继承、组合继承、寄生组合继承)...

    时飞 评论0 收藏0

  • Javascript面向对象编程

    摘要：如果要理解基于原型实现面向对象的思想，那么理解中得三个重要概念构造函数原型原型链对帮助理解基于原型的面向对象思想就显得尤为重要。函数对象的原型在中，函数是一种特殊的对象，所有的函数都是构造函数的实例。 介绍 和java这种基于类（class-base）的面向对象的编程语言不同，javascript没有类这样的概念，但是javascript也是面向对象的语言，这种面向对象的方式成为 基...

    wanglu1209 评论0 收藏0

  • JS面向对象二:this/原型链/new原理

    摘要：情况没有明确作用对象的情况下，通常为全局对象例如函数的回调函数，它的就是全局对象。正因如此，机器可以作为这类对象的标志，即面向对象语言中类的概念。所以机器又被称为构造函数。原型链也就是继承链。 JS面向对象二:this/原型链/new原理 阮一峰JavaScript教程:面向对象编程 阮一峰JavaScript教程:实例对象与 new 命令 阮一峰JavaScript教程:this 关...

    anRui 评论0 收藏0

  • JS对象(1)重新认识面向对象

    摘要：对象重新认识面向对象面向对象从设计模式上看，对象是计算机抽象现实世界的一种方式。除了字面式声明方式之外，允许通过构造器创建对象。每个构造器实际上是一个函数对象该函数对象含有一个属性用于实现基于原型的继承和共享属性。 title: JS对象(1)重新认识面向对象 date: 2016-10-05 tags: JavaScript 0x00 面向对象 从设计模式上看，对象是...

    superw 评论0 收藏0

发表评论

登陆后可评论

0条评论

wfc_666

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<