js-构造函数及与原理

自定义构造函数基本使用大驼峰


function Teacher() {// console.log(this);this.name = '张三',this.smoke = function () {console.log('抽了一只烟');}
}// Teacher()   // 如果只执行的话,this指向的是window// 实例化后的this指向实例化的对象
var tea1 = new Teacher()
var tea2 = new Teacher()
tea1.name = '李四'
// 打印的name是不一样的,互不影响
// 构造函数的复用性高
console.log(tea1,tea2);

构造函数接受参数

// 构造函数接受参数
function Teacher(name,age) {this.name = name,this.age = age,this.smoke = function () {console.log('抽了一只烟');}
}// Teacher()   // 如果只执行的话,this指向的是window// 实例化后的this指向实例化的对象
var tea1 = new Teacher('张三',18)
var tea2 = new Teacher('李四',28)
console.log(tea1,tea2);

构造函数接收一个对象做为参数 (参考VUE)

function Teacher(opt) {this.name = opt.name;this.age = opt.age;this.smoke = function () {console.log('抽了一只烟');}
}// Teacher()   // 如果只执行的话,this指向的是window// 实例化后的this指向实例化的对象
var tea1 = new Teacher({name: '张三',age: 18
})
var tea2 = new Teacher({name: '李四',age: 38
})
console.log(tea1,tea2);

构造函数的原理

new关键字做了什么?

新建了一个空对象,这个原型对象指向构造函数的prototype,执行构造函数后,返回这个对象.

function Cart(color, brand) {this.color = color; //都是在this上保存的this.brand = brand;// 构造函数隐式return 一个this// 如果你return 引用值是有效的, return 原始值是无效的.// return {}  // 结果是return {}// return 90  // 结果是return this
}
var car1 = new Cart('red','BYD')
console.log(car1);// GO = { 页面加载全局
//     1.Cart:function(){} ,// 执行函数
//     2.car1: { color: color, brand: brand }
// }// AO = {
//    1.看到new,会在AO保存一个this对象.上边的是在this里
//      this: { color: color, brand: brand }
// }// new 是为了改变this指向的.
// 1.保存一个空的this对象
// 2.把构造函数this东西写到创建的空this里
// 3.隐式加了一个 return this// 创建一个空对象,  功能就跟new是一样的
var my = {}
my.color = 'red'
return my

js-构造函数及与原理相关推荐

JS Promise的实现原理
转载自 JS Promise的实现原理在前端开发过程中,会经常使用到 Promise 模式,可以使异步代码看起来如同步般清新易读,从而从回调地狱中解脱出来.ES6中已原生支持 Promise, ...
[js] axios拦截器原理是什么？
[js] axios拦截器原理是什么? 拦截器原理其实就是用use添加用户自定义的函数到拦截器的数组中. 最后把他们放在拦截器请求前,请求后.组成promise链式调用. // 组成`Promise` ...
JS异步：执行原理与回调
JS异步:执行原理与回调一.JS异步的执行原理二.JS异步中的回调一.JS异步的执行原理我们知道JavaScript是单线程的,而浏览器是多线程的.单线程执行任务需要一个个排队进行,假如一 ...
WPS加载项是如何实现调用业务系统JS的 WPS通信原理
WPS加载项是如何实现调用业务系统JS的 WPS通信原理 wpssdk 一.业务系统调用WPS原理二.WPS调用业务系统JS的原理 End 写在前面:JSAPI金山办公官方群 756432763 欢 ...
JS构造函数返回值问题
1.js构造函数返回值问题构造函数本不应该,不需要有返回值,实际执行的返回值就是此构造函数的实例化对象但是在 js 中构造函数可以有返回值也可以没有,没有时,和正常的构造函数一样,返回实例化对象 ...
js构造函数、原型与继承深入
文章目录构造函数.原型.继承构造函数定义构造函数调用构造函数构造函数的返回值引用构造函数 this指针 this安全策略绑定函数使用bind 链式语法原型定义原型访问原型设置原 ...
js构造函数的实例成员和静态成员
js构造函数的实例成员和静态成员构造函数是一种特殊的函数,主要用来初始化对象,也就是为对象成员(属性,方法)赋初始值. Js的构造函数中可以添加一些成员,可以在构造函数本身上添加,也可以在构造函数内 ...
JS原型继承工作原理
为什么80%的码农都做不了架构师?>>> 当查找一个对象的属性时,JS会向上遍历原型链,直到找到给定的属性名称为止,如果没找到就是undefined. 大多数的JS的实现用_p ...
数据挖掘与分析 - 用JS实现推荐系统的原理与开发
数据挖掘与分析 - 推荐系统的原理与开发图表一览试想一个推荐系统的应用场景分析应用场景的需求开始开发推荐图书系统常规解决想法曼哈顿距离欧氏距离闵可夫斯基距离皮尔逊相关系数余弦相似度 ...
JSON和JSONP【JS+AJAX跨域原理和实现】
前言由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socke ...

js-构造函数及与原理

js-构造函数及与原理相关推荐

最新文章

热门文章