【JavaScript 6连载】三、构造函数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-构造函数</title>
<script>
// 构造函数就是一种专门用来创建对象的一种函数

// 使用系统原生的构造函数创建对象
// var student =new Object();
// student.name = '张三';
// student.sex = 'b';
// student.study = function(){
// console.log('学习');
// }
// student.study();

// 自定义构造函数
var name = '张三';
console.log(name);

function Student(){
this.name = "李四";
this.age = 18;
this.sex = 'b';
this.play = function(){
console.log('谁晚上跟' + this.name + '一起LOL');
}
}

// var st1 = new Student();
// st1.play();
// console.log(st1.name);

// var st2 = Student();
// // st2.play();
// // console.log(st2.name);
// console.log(window.name);
// console.log(name);
// console.log(age);

// 自定义构造函数需要注意：1、构造函数首字母大写，为了跟普通的函数区分，2、在使用的时候，必须使用new关键字，3、返回值就是当前对象本身

// 调用构造函数的步骤：
/*
1、创建一个新对象
2、将构造函数的作用域赋给这个新对象
3、执行构造函数的代码
4、返回新对象
*/

// 使用构造函数的时候，必须使用new关键字，如果不使用new，会造成，对象无法返回，并且会影响函数调用者的环境变量

function Student1(){
this.name = "李四";
this.age = 18;
this.sex = 'b';
this.play = function(){
console.log('谁晚上跟' + this.name + '一起LOL');
}
}

// 使用instanceof来判断某个对象是否属于某个构造函数类型
var st3 = new Student1();
console.log(st3 instanceof Student1);
console.log(st3 instanceof Object);

</script>
</head>
<body>

</body>
</html>

实例二：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建对象</title>

</head>
<body>
</body>
<script>

// 标准对象构造器
function Person(n, a, t){
// 局部变量可以理解成对象的私有属性
var secret = "秘密";
this.name = n;
this.age = a;
this.runType = t;
this.run = function(){
// 对象的方法可以访问(读取)自己的属性，但是尽量使用 this.xxxx 来访问
console.log(this.runType);
}
this.introduce = function (){
console.log("我是"+this.name+"我今年"+this.age+"岁了");
}
this.doSome = function(){
// 方法也可以设置自己的属性
this.runType = "?";
}
}

// new的过程实际上是在堆上为对象分配内存空间，然后再调用构造器的时候传入构造器中表示新建的对象，最后把这个地址也赋给 xiaoli 这个变量
// 本质上所有对象变量存储的都是一个地址值，这个地址可以找到对象在堆上的内存，从而操作对象
var xiaoli = new Person("小丽", 20, "✈️");
console.log(xiaoli.name);
xiaoli.run();
xiaoli.introduce();

</script>
</html>

转载于:https://www.cnblogs.com/7qin/p/10226407.html

【JavaScript 6连载】三、构造函数相关推荐

【译】JavaScript 工厂函数 vs 构造函数
译者:前端小智原文:medium.com/@chamikakas- 当谈到JavaScript语言与其他编程语言相比时,你可能会听到一些令人困惑东西,其中之一是工厂函数和构造函数. 想优质文章请猛戳 ...
（二）Javascript面向对象编程：构造函数的继承
Javascript面向对象编程:构造函数的继承这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承&q ...
JavaScript高级笔记_002_构造函数和原型
JavaScript高级笔记_002_构造函数和原型构造函数和原型构造函数和原型概述构造函数构造函数的问题构造函数原型`prototype` 对象原型`__proto__` (四个下划线) ...
JavaScript有哪三部分组成?
在学习web前端技术时,最常见的也是需要最着重学习的就是JavaScript这一方面,工作中也是会经常用到的,那么JavaScript有哪三部分组成呢?来看看下面的详细介绍. JavaScript有哪 ...
JavaScript由哪三部分组成呢？
在学习web前端技术时,最常见的也是需要最着重学习的就是JavaScript这一方面,工作中也是会经常用到的,那么JavaScript有哪三部分组成呢?来看看下面的详细介绍. JavaScript有哪 ...
JavaScript学习（三十九）—对象中内容的操作
JavaScript学习(三十九)-对象中内容的操作一.对象中内容的操作:增.删.改.查 (一).增:给对象添加属性或者方法 1)方式1:对象名称.属性名=属性值: 2)方式2:对象名称['属性名' ...
JavaScript学习（三十八）—面向过程与面向对象
JavaScript学习(三十八)-面向过程与面向对象一.程序设计语言中的两大编程思想:面向对象.面向过程 (一).面向过程就是指完成某个需求的时候,先分析出完成该需求时所需要经历的步骤有哪些,然 ...
JavaScript学习（三十七）—实现右键自定义菜单的功能
JavaScript学习(三十七)-实现右键自定义菜单的功能代码如下: <!DOCTYPE html> <html lang="en"><head& ...
JavaScript学习（三十六）—移动的小球
JavaScript学习(三十六)-移动的小球代码如下: <!DOCTYPE html> <html lang="en"><head>< ...
JavaScript学习（三十五）—拖动元素
JavaScript学习(三十五)-拖动元素代码如下: <!DOCTYPE html> <html lang="en"><head><m ...

【JavaScript 6连载】三、构造函数

【JavaScript 6连载】三、构造函数相关推荐

最新文章

热门文章