JS创建对象和实现继承的方式

2019-08-06  本文已影响0人  Huang_jing

前端知识点:

一、创建对象的方式

工厂模式、构造函数模式、原型模式、组合使用构造函数模式和原型模式、动态原型模式、寄生构造函数模式、稳妥构造函数模式、

1.工厂模式

function createPerson(name,age,job){

var o = new Object();

o.name = name;

o.age = age;

o.job = job;

o.sayName = function(){

alert(this.name)

}

return o;

}

var person1 = createPerson(‘Hj’,24,‘Teacher’);

2.构造函数模式

function Person(name,age,job){

this.name = name;

this.age = age;

this.job = job;

this.sayName = function(){

alert(this.name)

}

}

var person1 = new Person(‘Hj’,24,‘Teacher’);

3.原型模式

function Person(){ }

Person.prototype = {

constructor: Person,

name:‘Hj’,

age: 24,

job:’Teacher’,

sayName: function(){

alert(this.name)

}

}

组合使用构造函数模式和原型模式(使用最广泛、认同度最高)

function Person(name,age){

this.name = name;

this.age = age;

Person.prototype = {

constructor: Person,

sayName: function(){

alert(this.name)

}

}

4.动态原型模式

function Person(name,age){

this.name = name;

this.age = age;

if  (typeof this.sayName !=“function”){

Person.prototype.sayName = function(){

alert(this.name)

}

}

5.寄生构造函数模式

function Person(name,age,job){

var o = new Object();

o.name = name;

o.age = age;

o.job = job;

o.sayName = function(){

alert(this.name)

}

return o;

}

var person1 = new Person(‘Hj’,24,‘Teacher’);

6.稳妥构造函数模式

function Person(name,age,job){

var o = new Object();

//在这里定义私有变量和函数

o.sayName = function(){

alert(this.name)

}

return o;

}

除了调用sayName()方法外,没有别的方式访问对象的数据

二、继承

原型链、借用构造函数、组合继承、原型式继承、寄生式继承、寄生组合式继承

1.原型链

2.子类原型指向父类的实例对象

SubType.prototype = new SuperType();

3.借用构造函数

function SubType(){

//继承了SuperType

SuperType.call(this);

}

4.组合继承(最常用的继承模式)

function SubType(name,age){

//继承了SuperType属性

SuperType.call(this,name);

this.age = age;

}

//继承方法

SubType.prototype = new SuperType();

SubType.prototype.constructor = subType;

三、函数

1.递归

function factorial(num){

if(num < 1){

return 1;

} else {

return num * arguments.callee(num -1);

}

}

factorial(5)    // 120

2.闭包

闭包是指有权访问另一个函数作用域中的变量的函数。

常用创建方式:在一个函数内部创建另一个函数。

四、BOM浏览器对象模型

window对象

window.open(‘url’,  target属性或窗口名称)

_blank - URL加载到一个新的窗口。这是默认

_parent - URL加载到父框架

_self - URL替换当前页面

_top - URL替换任何可加载的框架集

name-窗口名称

关闭打开的窗口

var newWindow = window.open(‘http://www.baidu.com’);

newWindow.close();

五、DOM操作

选择符API

querySelector() 返回该模式匹配的第一个css选择符元素

querySelectorAll()  返回该模式匹配的所有css选择符元素

上一篇下一篇

猜你喜欢

热点阅读